小型Jquery问题
Small Jquery Issue
我有一个JQUERY脚本在www.blishair.com.au.上运行
脚本将3个左手div设置为粘性,即当用户滚动div时。我一直试图让jquery在一个名为wholewrap的div上找到高度(顾名思义,它是整个站点的包装器)。一旦我得到了这个值,我想看看它是否小于某个值(目前我正在尝试1500px——反复尝试,看看哪一个有效)。如果整体包裹的高度小于我的预定尺寸,那么我希望setting2变量反映一个尺寸,否则反映另一个尺寸。
这是我的密码。我只想把setting2的高度设置为div wholewrap的高度(以阻止www.blishair.com.au上的溢出问题)我已经添加了整个JS文件,因为我不确定哪里出了问题:
function StickyScroller(obj, options)
{
//Store function scope
var $this = this;
//Store initial top and left/right values
var top = $(obj).css('top');
var left = $(obj).css('left');
var right = $(obj).css('right');
var scroll = 0;
var tempScroll = 0;
//------------------------------------------------------------
// Set default property values
//------------------------------------------------------------
var defaults = {
start: 0,
end: 1000,
interval: 400,
margin: parseInt(top, 10),
range: 400
}, settings = jQuery.extend(defaults,options);
obj = $(obj);
settings.index = 0;
settings.oldIndex = 0;
//Accessors for settings
GetSet.getters({scope: $this, obj: settings});
//------------------------------------------------------------//
// Callback Functions //
//------------------------------------------------------------//
var Callback = {};
Callback.newIndex = function(){}; //When the index changes
Callback.limbo = function(){}; //When scroller not in range
Callback.scroll = function(){}; //On window scroll
//Get setters for Callback functions
GetSet.setters({scope: this, prefix: "on", obj: Callback});
//=========================================================//
//Public distanceFrom
//Purpose: Determines the distance in pixels between
// the scroller and an index
//Parameters:
// index: The index whose distance from scroller will be calculated
//Postcondition: Returns an integer
//=========================================================//
this.distanceFrom = function(index)
{
tempScroll = $(window).scrollTop();
//Check for both references: "Top" of the range and "bottom"
var top = index*settings.interval;
var bottom = index*settings.interval + settings.range;
var distanceFromTop = Math.abs(tempScroll-top);
var distanceFromBottom = Math.abs(tempScroll-bottom);
//Return the smallest distance
if(distanceFromTop < distanceFromBottom)
{
return distanceFromTop;
}
else
{
return distanceFromBottom;
}
};
var whwrap = $("#wholewrap").height();
var wrap2 = $("#wrap2").height();
var mwrapEDIT = $("#middlewrap").height();
var mwrap = (mwrapEDIT * .8);
if(whwrap < 1500)
{
var setting2 = wrap2;
}
else
{
var setting2 = mwrap;
}
//=========================================================//
//Public closestIndex
//Purpose: Determines the closest index
//Postcondition: Returns the closest index as an integer
//=========================================================//
this.closestIndex = function()
{
//If index is 0, automatically return 1
if(settings.index === 0)
{
return 1;
}
//Distance from next/previous index
var dPrev = this.distanceFrom(settings.index-1);
var dNext = this.distanceFrom(settings.index+1);
//Return the index associated with the smallest distance
if(dPrev <= dNext)
{
return settings.index-1;
}
else
{
return settings.index+1;
}
};
//=========================================================//
//Private getIndex
//Purpose: returns index
//=========================================================//
var getIndex = function()
{
tempScroll = $(window).scrollTop() + settings.margin;
//Make sure movement would be in the bounds
if(tempScroll > settings.start && tempScroll < setting2)
{
//Possible new index
tempIndex = Math.floor((tempScroll-settings.start)/settings.interval);
//Make sure the index is different before reassigning
//or executing the callback
if(tempIndex !== settings.index)
{
//Store old index
settings.oldIndex = settings.index;
//Assign new index
settings.index = tempIndex;
}
}
//If tempScroll goes beyond end mark, set distance at end mark
else if(tempScroll >= setting2)
{
settings.oldIndex = settings.index;
settings.index = Math.floor((setting2-settings.start)/settings.interval);
}
//If tempScroll goes beyond beginning mark, set distance at start
else
{
settings.oldIndex = settings.index;
settings.index = 0;
}
};
//=========================================================//
//Public firstIndex
//Purpose: Returns first index
//Postcondition: Returns an integer
//=========================================================//
this.firstIndex = function()
{
return 0;
};
//=========================================================//
//Public lastIndex
//Purpose: Returns last index
//Postcondition: Returns an integer
//=========================================================//
this.lastIndex = function()
{
return Math.floor((setting2-settings.start)/settings.interval);
};
//=========================================================//
//Public inRange
//Purpose: Determines if the scroller is in interval range
//Postcondition: Returns boolean
//=========================================================//
this.inRange = function()
{
var scroll = $(window).scrollTop() - settings.start + settings.margin;
var inRange = (scroll >= settings.index * settings.interval) &&
(scroll <= (settings.index*settings.interval + settings.range));
return inRange;
};
//------------------------------------------------------------//
// On Browser Scroll //
//------------------------------------------------------------//
var wrap = $('<div id="scrollcontainer">').css(
{
width: obj.width(),
height: obj.height(),
position: "absolute"
});
obj.wrap(wrap);
$(window).scroll(function()
{
scroll = $(window).scrollTop() + settings.margin;
//Get the current index
getIndex();
//If scroll less than beginning, set back to beginning
if(scroll < settings.start)
{
$(obj).css({
position : 'absolute',
top: 0,
left: 0,
right: 0});
$("#scrollcontainer").css({
position : 'absolute',
top: settings.start,
left: left,
right: right});
}
//If scroll greater than ending position, set to end
else if(scroll > setting2)
{
$(obj).css({
position : 'absolute',
top: 0,
left: 0,
right: 0});
$("#scrollcontainer").css({
position : 'absolute',
top: setting2,
left: left,
right: right});
}
//Make sure we stay in the specified boundaries
else
{
//Put back to fixed
$(obj).css({
position : 'fixed',
top: settings.margin,
left: left,
right: right});
}
//If in the specified range and a new index, do the callback
if(settings.oldIndex !== settings.index)
{
Callback.newIndex(settings.index);
}
//Do the "limbo" call back, which is a callback that executes when
//the scroller is not in the range, but still between start and end
if( !$this.inRange() && scroll > settings.start && scroll < setting2 )
{
Callback.limbo(settings.index);
}
//Do the scroll callback regardless of what happens
Callback.scroll(settings.index);
});
}
我走对了吗?
谢谢。
更新:
顺便问一下,你没有考虑CSS解决方案的原因是什么?下面的CSS似乎解决了这个问题:
div#menuwrap {
position: fixed;
left: 0;
top: 5%;
}
查看您的网站(在谷歌Chrome中,运行速度为1440 x 900):
- 您有5个具有
id="rnd_container"
的div(对于每个元素,id
属性应该是唯一的) - 您有5个带有
id="contentimages"
的div - 您有3个带有
id="block"
的div - 您在
h3
标记上有一个大小写不匹配(<h3>15/1/12 - Bliss Online launched!</H3>
应该是<h3>15/1/12 - Bliss Online launched!</h3>
)。这可能会阻止正确关闭标记(从而导致问题)
以上是我认为的大问题,但您可以在以下位置看到所有验证错误:http://validator.w3.org/check?uri=http%3A%2F%2Fwww.blisshair.com.au%2F&charset=%28detect+自动%29&doctype=内联&组=0
我还要确保<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
是加载的第一个脚本。
Onhttp://blisshair.com.au/bookonline.php,<div id="right">...</div>
具有745px的宽度和220px的左边距。剩下的空白是造成恐惧的原因。如果你把它改成22像素,它看起来很好。或者,您可以将div#的宽度向右更改为57%,即558px,它也可以工作。
至于修复页脚的溢出问题(以及与之相关的setting2
),$("#wholewrap").height()
返回2597px,因此永远不会达到您任意的1500px限制。此外,<div id="footer" class="clearer">
是<div id="wholewrap">
的子代。呃,div#footer
的高度是div#wholewrap
高度的一部分,所以我不确定更改setting2
是否能解决这个问题。
您希望如何解决"溢出问题"?当div#footer
出现在屏幕上时,是否希望div#middlewrap
向上滚动?你想把div#footer
移到右边吗?还有别的吗?请说明应如何解决该问题。
- 神秘的ajax json请求问题jQuery
- 这个代码出了什么问题?(Jquery)
- 图片库问题jquery
- SetInterval 60秒倒计时问题jQuery
- 这行代码出了什么问题?(jQuery.parseJSON)
- onclick属性的引号过多的问题 - jQuery,HTML
- IE8 问题 - jQuery 调整页面大小时导航 html
- nivo滑块和光滑的轮播无法协同工作的问题 - jquery
- Google Charts - hAxis 上的数字/字符串问题(Jquery ajax JSON 数据)
- window.位置问题JQuery代码
- 延迟对象使用问题jQuery
- 文件订单加载问题-jquery
- ie7问题:jquery点击编辑不工作
- jquery.mouseenter()问题jquery.mouseleave()和子元素
- Webkit问题:jQuery没有定义
- 拖放问题jquery
- 检索按钮值问题Jquery
- 选择所有复选框问题(jQuery)
- 过滤逻辑问题jQuery
- 逻辑运算符OR问题:jQuery