的Javascript固定滚动定位

正如你所看到的，我有侧边栏链接滚动，我向下滚动网页...但是当你去远跌页脚，链接重叠页脚和不好看。

我需要一种方式，让我向下滚动（比如说，大约350像素有几个或几个）后，侧边栏链接距离屏幕顶部只有20-30px，然后在滚动时返回原始位置备份。

（如果有一种方法可以做这样的事情只用CSS，这将是理想的，但我敢肯定你不能）

2012-07-26 aalok89

我注意到你的'scroll'方法等问题，你可能不知道的。首先，当我的浏览器是全屏幕*垂直尺寸时（我的显示器是1920x1200），我看不到文本链接重叠。当我调整浏览器的高度以使其高度达到75％时，我会看到您描述的问题。当我的浏览器高度是50％（尝试自己）时，滚动是无限的！使事情变得更加复杂，无论何时使用浏览器缩放（Ctrl和+），滚动方法都会完全中断，而不管浏览器窗口的高度如何。 – arttronics 2012-07-26 03:42:47

你能显示你使用的代码吗？ – Sibu 2012-07-26 04:10:45

是的，我知道这些。这就是为什么我试图解决它，所以它更少问题。我是初学者，所以我知道有很多问题。我不知道任何JavaScript，所以我只是依靠我可以在互联网上找到的东西。您可以通过查看页面源代码来查看代码。它是头标记中的第二个脚本函数。 – aalok89 2012-07-26 04:40:18

运行if语句测试，如果用户滚动一路底部，如果是这样的情况下，通过jQuery更新CSS top：

$('.sidebar').css('top', parseInt($('.sidebar').css('top'), 10) - 'value to shift by' + 'px');

parseInt($('.sidebar').css('top'), 10)获得当前的头等值作为一个整数，然后可以添加到，到侧边栏移动到理想的位置。

来源

2012-07-26 03:30:28 zoranc

reference

var divs = $('.social, .title'); 
$(window).on('scroll', function() { 
    var st = $(this).scrollTop(); 
    divs.css({ 'opacity' : (1 - st/35) }); 
});

转到上面的链路，并期待在代码下面的例子。 35/35 = 0

example fiddle

updated fiddle

来源

2012-07-26 03:30:47 user1071979

我不想要任何不透明度改变。我只想让侧栏从顶部向上滚动30px左右，然后向下滚动到侧栏的原始位置。我甚至可以在没有我现在拥有的小动画卷轴的情况下做。谢谢你！ – aalok89 2012-07-26 03:44:26

尝试用另一个div封装边栏div，固定高度为30 px。这种方式边栏不会比它的父div更进一步。 – user1071979 2012-07-26 04:04:22

您需要创建要停止你的滚动DIV额外停止格 - 当scrollTop的达到35px随后的div的不透明度为1

从进一步滚动。我创造了一个小提琴，也许它会帮助你更好地理解

HTML

<div id="fixeddiv"> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 

    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    <div id="scrollstopdiv"></div> 
    Demo 3<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 

    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
    Demo 1<br/> 
</div> 
<div id="scrollingDiv">scrolling div</div>

$().ready(function() { 
     var $scrollingDiv  = $("#scrollingDiv"); 

     var tksheight   = $("#scrollingDiv").height(); 
     var tksposition  = $("#scrollstopdiv").position(); 

     var stopdiv = tksposition.top - (tksheight+400);//adjust position to stop scrolling 

    $(window).scroll(function(){    
    if($(window).scrollTop() > 5 && $(window).scrollTop() < stopdiv){ <!-- --> 
       $scrollingDiv 
       .stop() 
       .animate({"paddingTop": ($(window).scrollTop()+300) + "px"}, "slow"); 
      } 
     }); 
    });

CSS

#fixeddiv {width:50px;float:left;padding-right:130px;} 
#scrollingDiv{float:left;width:150px;}

jsFiddle

来源

2012-07-26 05:22:21 Sibu

的Javascript固定滚动定位

回答

相关问题