[英]How can I create a `sticky` floating fixed/scrolling sidebar?
我的網站左側有一個應該留在用戶手中的網站。 因此,當用戶滾動時,側邊欄會一直滾動,直到它從頁面頂部開始說5px。 從那時起,它應該被鎖定在那里。
當然,視口可能比左欄小,因此左欄不能完全適合屏幕。 雖然不是很戲劇化。 但是我希望如果用戶滾動到底部,側邊欄的底部“點擊”頁面的頁腳,然后再次滾動頁面。
這是我得到的代碼:我的網站的基本設置和我的問題的第一部分的嘗試(但你會看到它不起作用): jsfiddle 。
我認為問題的第一部分相當清楚,但第二部分可能有點難以理解,所以這是一個模型: 您可以看到沒有顯示文本,因為文本位於視口上方。
這是我嘗試第一部分的js:
$(document).ready(function () {
var theLoc = 5;
var links = $('#left');
$(window).scroll(function () {
console.log('scroll');
if (theLoc >= $(window).scrollTop()) {
if (links.hasClass('fixed')) {
links.removeClass('fixed');
}
} else {
if (!links.hasClass('fixed')) {
links.addClass('fixed');
}
}
});
});
但可能更多的是css問題:
.fixed {
position:fixed;
}
我嘗試再次指定高度等(因為它顯示得非常大),但沒有提前。
我之前做過這個,這是我創建的代碼: 查看JSFiddle 。
(你可能需要稍微更改你的標記,我不知道這對你的表格布局有多好,我建議使用divs
並浮動它們來布局你的內容。)或者,你可以使用代碼/邏輯以下,並使用您自己的布局roll your own
自己。
基本上,
- 獲取我們的元素
- 獲取頁面加載時側邊欄的位置
- 獲取#content.outerHeight()
一旦我們有了這些變量,在window scroll
測試中看看我們是否<=
(小於或等於)我們原來的sidebarTop position
或者檢查我們是否超過了blogHeight
,如果有2個是真的,刪除粘性類, elseif
我們的滾動>=
我們原始的sidebar
位置,則添加.sticky
類(其position: fixed
)。
Javascript就像這樣:
// Cache our vars for the fixed sidebar on scroll
var $sidebar = $('#sidebar-nav');
// Get & Store the original top of our #sidebar-nav so we can test against it
var sidebarTop = $sidebar.position().top;
// Edit the `- 10` to control when it should disappear when the footer is hit.
var blogHeight = $('#content').outerHeight() - 10;
// Add the function below to the scroll event
$(window).scroll(fixSidebarOnScroll);
// On window scroll, this fn is called (binded above)
function fixSidebarOnScroll(){
// Cache our scroll top position (our current scroll position)
var windowScrollTop = $(window).scrollTop();
// Add or remove our sticky class on these conditions
if (windowScrollTop >= blogHeight || windowScrollTop <= sidebarTop){
// Remove when the scroll is greater than our #content.OuterHeight()
// or when our sticky scroll is above the original position of the sidebar
$sidebar.removeClass('sticky');
}
// Scroll is past the original position of sidebar
else if (windowScrollTop >= sidebarTop){
// Otherwise add the sticky if $sidebar doesnt have it already!
if (!$sidebar.hasClass('sticky')){
$sidebar.addClass('sticky');
}
}
}
HTML :
<header>This is the header!</header>
<ul id="sidebar-nav" class="nav nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
</ul>
<div id="content">Content in here, scroll down to see the sticky in action!</div>
<div class="clear"></div>
<div id="footer">This is the #footer</div>
CSS :
/* Sticky our navbar on window scroll */
#sidebar-nav.sticky {position:fixed;top:5px;}
/* Other styling for the html markup */
header {
border:1px solid #aaa;
background-color:yellow;
margin-bottom:5px;
height:50px;
}
#sidebar-nav {
width:150px;
border:1px solid #ddd;
margin:0;
padding:0;
float:left;
}
#sidebar-nav li {
list-style:none;
border:1px solid #ddd;
margin:10px;
padding:2px;
}
#content {
height:2000px;
width:500px;
padding:10px;
border:1px solid #ddd;
margin:0 0 10px 5px;
float:right;
}
#footer {
height:800px;
border:1px solid green;
background-color:#ddd;
}
.clear {
clear:both;
}
:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.