1. ホーム
  2. 質問と答え
  3. スクロールのようにスクロールするときにサイドバーを固定する方法

スクロールのようにスクロールするときにサイドバーを固定する方法

2016-04-14 13 views
0

ok。サイドバーに問題があります。私は左のサイドバーを固定して、「こんにちは、世界？サイドバーはスティッキーのように上がります。私はプラグインを使いたくない。私はいくつかの短いコードが必要です。それはそのためだけのものです。 jsfiddleで私を助けてください。 CSSでのID bar-fixedのために使用position: fixed;スクロールのようにスクロールするときにサイドバーを固定する方法

*/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

ありがとうございました。

出典

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

 関連する問題

  • 関連する問題はありません^_^