1. 首页
  2. 问答
  3. 如何让侧边栏固定滚动像粘滞

如何让侧边栏固定滚动像粘滞

2016-04-14 81 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

相关问题

 相关问题