jQuery的滾動/遵循側欄（DIV）

用於滾動/以下邊欄jquery的技術從Help with Scroll/Follow Sidebar jQuery的滾動/遵循側欄（DIV）

$(function() { 
    var $sidebar = $(".sidebar"), 
     $window = $(window), 
     $footer = $(".footer"), // use your footer ID here 
     offset  = $sidebar.offset(), 
     foffset = $footer.offset(), 
     threshold = foffset.top - $sidebar.height(), // may need to tweak 
     topPadding = 15; 

    $window.scroll(function() { 
     if ($window.scrollTop() > threshold) { 
      $sidebar.stop().animate({ 
       marginTop: threshold 
      }); 
     } else if ($window.scrollTop() > offset.top) { 
      $sidebar.stop().animate({ 
       marginTop: $window.scrollTop() - offset.top + topPadding 
      }); 
     } else { 
      $sidebar.stop().animate({ 
       marginTop: 0 
      }); 
     } 
    }); 
});

唯一的問題是當邊欄（.sidebar）達到頁腳（.footer）它向下推頁腳幾乎與頁腳高度有關。
如果頁腳高度爲200px，則側欄將頁腳壓至〜200px（Internet Explorer），〜50px（Firefox，Chrome，Opera），然後顯示頁腳。
內容和頁腳之間200px的空白是我真正的問題。
我希望側邊欄停止滾動頁腳開始的位置。

來源

2013-08-01 Ashish GamezAddicted

所以你需要使你的腳本中減去從窗口高度計算頁腳..... – Rooster

嘗試'閾值= foffset.top的高度 - $ sidebar.height（） - offset.top' –

@Vicky工作，謝謝 –

嘗試

threshold = foffset.top - $sidebar.height() - offset.top

來源

2013-08-01 19:21:06

工作，非常感謝 –

也許更乾淨的代碼：

$(function() { 
    var $sidebar = $("#sidebar"), 
     $window = $(window), 
     offset  = $sidebar.offset(), 
     topPadding = 15; 

    $window.scroll(function() { 
     if ($window.scrollTop() > offset.top) { 
      $sidebar.stop().animate({ 
       marginTop: $window.scrollTop() - offset.top + topPadding 
      }, 400); 
     } else { 
      $sidebar.stop().animate({ 
       marginTop: 0 
      }, 400); 
     } 
    }); 
});

可以更改400與他人值由0更改動畫（設置它的持續時間，讓側邊欄到「不」動畫）。

來源

2013-12-03 15:38:03 damoiser

這個問題太老了，我讀了其他答案後，我爲我的情況。我希望這有助於後來的人。

$(function() { 
var $sidebar = $("#sidebar"), 
$window = $(window), 
offset  = $sidebar.offset(), 
topPadding = 15; 
$window.scroll(function() { 
if ($window.scrollTop() > offset.top) { 
    if (($window.scrollTop())> ($("#following").offset().top + $("#following").height() - $sidebar.height())) { 
     ; 
    } else { 
     $sidebar.stop().animate({ 
      marginTop: $window.scrollTop() - offset.top + topPadding 
     }, 400); 
    } 

} else { 
    $sidebar.stop().animate({ 
     marginTop: 0 
    }, 400); 
} 
}); 
});

see picture

來源

2015-05-12 00:41:25

jQuery的滾動/遵循側欄（DIV）

回答

相關問題