JS、HTML、CSSを使用したスクロールWebサイトコード

-2

私はスクロールする際に私のメニューバーをページ上部に貼り付けようとしています。それは最初はトップにはありませんが、私がそれにスクロールすると、トップに固執します。私はそれを働かせることはできません。JS、HTML、CSSを使用したスクロールWebサイトコード

<html> 
<head> 

<! Links /!> 
<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript">google.load("jquery", "1.3.2");</script> 
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" type="text/css" href="css.css"> 

<script type="text/javascript"> 
$(document).ready(function() { 

    $(window).scroll(function() { 
    //if you hard code, then use console 
    //.log to determine when you want the 
    //nav bar to stick. 
    console.log($(window).scrollTop()) 
if ($(window).scrollTop() > 280) { 
    $('#nav_bar').addClass('navbar-fixed'); 
} 
if ($(window).scrollTop() < 281) { 
    $('#nav_bar').removeClass('navbar-fixed'); 
} 
}); 
}); 
</script> 

<! Top Image /!> 
<div class="cd-fixed-bg cd-bg-1"> 
</div> 

<! MenuBar /!> 
<div class="cd-scrolling-bg cd-color-2"> 
<div id="nav_bar" class="nav_bar"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Examples</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div> 

</head> 

<! Body /!> 
<body> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> 
</body> 
</div>

CSS：

/*Menubar*/ 
ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #2c3e50; 
color: #2c3e50; 
} 
li { 

color: #ecf0f1; 
display:inline-block; 
} 
li a:hover { 
background-color: #2980b9; 
color: #ecf0f1; 
} 
li a { 
display: block; 
color:#ecf0f1; 
padding: 14px 16px; 
text-decoration: none; 

} 
#nav_bar { 
border: 0; 
background-color: #202020; 
border-radius: 0px; 
margin-bottom: 0; 
height: 30px; 
margin-top: 0; 
top: 0; 
z-index: 10000; 
border-radius: 0 0 0.5em 0.5em; 
position: relative; 
width:100%; 
font-family: 'Roboto', sans-serif; 
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31); 
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31); 
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31); 
} 

.navbar-fixed { 
top: 0; 
z-index: 100; 
position: fixed; 
width: 100%; 
}

スクロールとは何の関係もなかった原因私はポストのdidnt CSSの山（それはラスタースクロールした）

出典

2017-01-26 cakebandit

このHTTPの可能性のある重複：/ /stackoverflow.com/questions/19328107/fixed-navigation-on-scroll –

タイトルと説明がうまく書かれておらず、投稿がスタックオーバーフローですでに利用可能であるため投票しました –

[Fスクロールでのixed Navigation]（http://stackoverflow.com/questions/19328107/fixed-navigation-on-scroll） – Grey

-1

あなたの上に固定された位置を使用してみてくださいがありますヘッダDIV
[CSS]

body { 
    height: 1000px; 
    margin: 0; 
    padding: 0 
} 

.header { 
    width: 100%; 
    border: solid 1px #fff; 
    position: fixed; 
    top: 0; 
} 

ul { 
    border: solid 1px #f00; 
    list-style-type: none; 
    overflow: hidden; 
} 

li { 
    width: 25%; 
    float: left; 
}

[ HTML]

<div class="header"> 
    <ul> 
    <li><a href="">Menu1</a></li> 
    <li><a href="">Menu1</a></li> 
    <li><a href="">Menu1</a></li> 
    <li><a href="">Menu1</a></li> 
    </ul> 
</div>

https://jsfiddle.net/p9gs54cL/4/

出典

2017-01-26 09:03:00

いつも修正されています。 OPは最初に静的に配置され、スクロールでのみ固定に移動する必要があります。 – Justinas

チェックこの例では、通常の要素として起動し、必要に応じてスクロールのイベントで、それを修正します。

<html> 
    <head> 
     <script> 
      function Menu(){ 
       if(document.body.scrollTop>200){ 
        menu=document.getElementById('menu'); 
        menu.style.position='fixed'; 
        menu.style.top='0px'; 
       }else{ 
        menu.style.position='absolute'; 
        menu.style.top='200px'; 
       } 
      } 
     </script> 
     <style> 
      body{ 
       height:300%; 
       margin:0; 
      } 
      #menu{ 
       background-color:gray; 
       height:10%; 
       position:absolute; 
       top:200px; 
       width:100%; 
      } 
     </style> 
    </head> 
    <body onscroll="Menu()"> 
     <div id="menu"> 
     </div> 
    </body> 
</html>

出典

2017-01-26 09:11:52 user7393973

ワンライナーではなくコードを読みやすくします。 – Justinas

@Justinas - 今は良くなるはずです。 – user7393973

JS、HTML、CSSを使用したスクロールWebサイトコード

答えて

関連する問題