1. 首頁
  2. 問答
  3. 如何讓側邊欄固定滾動像粘滯

如何讓側邊欄固定滾動像粘滯

2016-04-14 71 views
0

好的。我的側邊欄有問題。當我向下滾動「Hello，world？」時，我想讓左邊欄固定並上升側欄會像STICKY一樣上升。我不想用插件。我需要一些簡短的代碼。它只是用於這一點。幫助我與jsfiddle。謝謝如何讓側邊欄固定滾動像粘滯

*/i want use javascript.../
#header { clear:both; width: 100%; background-color: darkorange; border-top: 1px solid #d2d2d3; border-bottom: 1px solid #d2d2d3; margin: 20px 0px 20px 0px;} 
 

 

 
h1.head {font-family: verdana; font-size: 200%;} 
 

 
a { color: orange;} 
 

 
.sidebar { float: left; width: 25%; height: 100%;} 
 

 
#text { float: left; width: 70%;} 
 

 
body { text-align:center;} 
 

 
p, p a {text-align: left; font-size: 90%;}
<body> 
 
<div id="header"> 
 
\t <h1 class="head"><b>Hello, world ?</b></h1> 
 
</div> 
 

 
<div id="bar-fixed"> 
 
\t <div class="sidebar"> 
 
\t \t <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a></p> 
 
\t \t <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a></p> 
 
\t \t <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a></p> 
 
\t \t <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a></p> 
 
\t \t <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a></p> 
 
\t </div> 
 
</div> 
 

 
<div id="text"> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
</div> 
 
    
 
</body>

來源

2016-04-14 Karl Friedchicken

回答

3

使用position: fixed;在CSS的ID bar-fixed。

來源

2016-04-14 14:12:51

+0

不是這樣的..如果我使用。它會使邊欄在頂部有空間。 –

+0

是的，正確的。但是你需要使用其他樣式來放置側邊欄。如果你願意，我可以展示。 –

+0

讓我看看...編輯你最後的答案 –

2

更新：

我想我知道你想要什麼。用Javascript更新了代碼。

我正在設置限制滾動，超出此限制，我將在側邊欄中添加一個名爲.stickIt的類，並在一個位置進行修復。

DEMO：

/* it seems javascript..*/ 
 
var topLimit = $('#bar-fixed').offset().top; 
 
$(window).scroll(function() { 
 
    //console.log(topLimit <= $(window).scrollTop()) 
 
    if (topLimit <= $(window).scrollTop()) { 
 
    $('#bar-fixed').addClass('stickIt') 
 
    } else { 
 
    $('#bar-fixed').removeClass('stickIt') 
 
    } 
 
})
#header { 
 
    clear: both; 
 
    width: 100%; 
 
    background-color: darkorange; 
 
    border-top: 1px solid #d2d2d3; 
 
    border-bottom: 1px solid #d2d2d3; 
 
    margin: 20px 0px 20px 0px; 
 
} 
 
h1.head { 
 
    font-family: verdana; 
 
    font-size: 200%; 
 
} 
 
a { 
 
    color: orange; 
 
} 
 
#bar-fixed { 
 
    width: 30%; 
 
} 
 
#bar-fixed.stickIt { 
 
    position: fixed; 
 
    top: 0px; 
 
} 
 
.sidebar { 
 
    float: left; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#text { 
 
    float: right; 
 
    width: 70%; 
 
} 
 
body { 
 
    text-align: center; 
 
} 
 
p, 
 
p a { 
 
    text-align: left; 
 
    font-size: 90%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="header"> 
 
    <h1 class="head"><b>Hello, world ?</b></h1> 
 
    </div> 
 

 
    <div id="bar-fixed"> 
 
    <div class="sidebar"> 
 
     <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a> 
 
     </p> 
 
     <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a> 
 
     </p> 
 
     <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a> 
 
     </p> 
 
     <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a> 
 
     </p> 
 
     <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a> 
 
     </p> 
 
    </div> 
 
    </div> 
 

 
    <div id="text"> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
    </div> 
 

 
</body>

來源

2016-04-14 14:16:48 Roy

0 

*/i want use javascript.../
#header { clear:both; width: 100%; background-color: darkorange; border-top: 1px solid #d2d2d3; border-bottom: 1px solid #d2d2d3; margin: 20px 0px 20px 0px;} 
 

 

 
h1.head {font-family: verdana; font-size: 200%;} 
 

 
a { color: orange;} 
 

 
.sidebar { float: left; width: 25%; height: 100%;} 
 

 
#text { float: right; width: 70%;} 
 

 
body { text-align:center;} 
 

 
p, p a {text-align: left; font-size: 90%;} 
 

 
#bar-fixed { position: fixed; }
<body> 
 
<div id="header"> 
 
\t <h1 class="head"><b>Hello, world ?</b></h1> 
 
</div> 
 

 
<div id="bar-fixed"> 
 
\t <div class="sidebar"> 
 
\t \t <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a></p> 
 
\t \t <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a></p> 
 
\t \t <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a></p> 
 
\t \t <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a></p> 
 
\t \t <p class="bar"><a href="#"> 
 
\t \t Make this fixed when scroll</a></p> 
 
\t </div> 
 
</div> 
 

 
<div id="text"> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
<p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> 
 
</div> 
 
    
 
</body>

來源

2016-04-14 14:19:03

相關問題

 相關問題