的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固定滾動定位

回答

相關問題