我正在尝试复制http://www.kahuna-webstudio.fr/处的左侧导航。如果你看一下http://www.kahuna-webstudio.fr/,然后向下滚动大约50个像素左右,你会看到一个div出现在屏幕左侧,里面有一些导航。感谢stackoverflow中的一些人的帮助,我的大部分都在工作。但是,我没有工作的那一部分是我的div,图像的内容在向下滚动时不会保持静止(或始终可见)。
所以我想要发生的是:当div出现在屏幕左侧时,当用户向下滚动时,我希望div的内容始终显示在视图中。
现在我的工作是:通过animate()我将左侧nav div的高度设置为文档高度,宽度增加到80像素,然后一些图像淡入( )。但页面相当长,当用户向下滚动时,它们也可以向下滚动我的左侧导航div的高度;我一直希望左侧导航的内容始终显示在用户的视野中。
我认为这个人发布了一个类似的问题(Keeping a header always in view),但我发现如果我的示例代码很难附加。有人可以帮忙吗?我非常感激。
这是我的代码:
$(window).scroll(function(){
var wintop = $(window).scrollTop();
var docheight = $(document).height();
var winheight = $(window).height();
var newwidthgrow = 80;
var smallheight = 0;
var smallwidth = 0;
if((wintop > 296)) {
$("#slidebottom").stop().animate({height:docheight +"px"},'fast',function(){
$("#slidebottom").stop().animate({width:newwidthgrow + "px"},'slow',function(){
$("#slidebottomContents").fadeIn();
});
});
}
if((wintop < 25))
{
$("#slidebottom").stop().animate({height:docheight +"px"},'fast',function(){
$("#slidebottomContents").fadeOut(function(){
$("#slidebottom").stop().animate({width:smallwidth + "px"});
});
});
}
});
答案 0 :(得分:4)
就我而言,这只能由css覆盖。 要将div保持在相同位置,您可以应用以下css:
的CSS:
div id {
position: fixed;
left: 0px
width: 'your width'
}
固定位置将div冻结在您想要的位置。 left使div保持在您页面的左侧。
这会回答你的问题并解决你的问题吗? 如果没有让我知道!