CSSを使用したトップのナビゲーションバー

Question

ウェブページをスクロールするときに、ナビゲーションバーが上にくるようにします。

私はここで解決策を探してみましたが、より多くのエラーを引き起こしているので苦労しています。

position:fixed

を使用している場合、私はそれは私が私のバナーロゴの下になりたいオリジナルのpostionの問題を引き起こすことを発見。

HTMLとCSS用のコードは次のとおりです。

あなたは古いブラウザをサポートする必要がない場合は、

/* ******************* */ 
 
/* Navigiation   */ 
 
/* ******************* */ 
 

 
#sitenav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: inherit; 
 
    
 
} 
 

 
#sitenav ul { 
 
    background: black; 
 
    padding: 15px; 
 
} 
 
#sitenav ul li { 
 
    
 
    padding: 15px; 
 
    background: black; 
 
    display: block; 
 
    text-align: center; 
 
    font-family: 'Montserrat', sans-serif; 
 
    display: inline; 
 
} 
 

 
#sitenav ul li:hover { 
 
    background: rgb(43, 78, 89); 
 
    color:white; 
 
    cursor:pointer; 
 
}

<header class="clearfix"> 
 
    <div id="banner" class="middlecontent"> 
 
     <a href="index.html"><img src="images/logobanner.png"></a> 
 
    </div> 
 
    <nav> 
 
     <div id="sitenav"> 
 
      <ul > 
 
       <li><a href="index.html">Home</a></li> 
 
       <li><a href="#">Events</a></li> 
 
       <li><a href="#">Curriculum</a></li> 
 
       <li><a href="about_us.html">About</a></li> 
 
       <li><a href="#">Student</a></li> 
 
       <li><a href="#">Staff</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
</header>

Answer 1

、あなたは私はいくつかのコードを追加して、これを試してみてくださいposition: sticky
https://developer.mozilla.org/pl/docs/Web/CSS/position#Sticky_positioning

Answer 2

を使用することができますありがとうございました。

はJQuery：

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    if (scroll >= ($("header").height())) { 
     $("#sitenav").addClass("fix-header"); 
    } else { 
     $("#sitenav").removeClass("fix-header"); 
    } 
}); 

のCss：

body{ 
    margin:0; 
} 
section{ 
    background:#ccc; 
    height:800px; 
} 
#sitenav.fix-header { 
    position: fixed; 
    width: 100%; 
    left: 0; 
    right: 0; 
    top: 0; 
    margin:0; 
} 
#sitenav.fix-header ul{ 
    margin:0; 
} 

$(window).scroll(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll >= ($("header").height())) { 
 
     $("#sitenav").addClass("fix-header"); 
 
    } else { 
 
     $("#sitenav").removeClass("fix-header"); 
 
    } 
 
});

/* ******************* */ 
 
/* Navigiation   */ 
 
/* ******************* */ 
 

 
#sitenav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: inherit;  
 
} 
 

 
#sitenav ul { 
 
    background: black; 
 
    padding: 15px; 
 
} 
 
#sitenav ul li {  
 
    padding: 15px; 
 
    background: black; 
 
    display: block; 
 
    text-align: center; 
 
    font-family: 'Montserrat', sans-serif; 
 
    display: inline; 
 
} 
 

 
#sitenav ul li:hover { 
 
    background: rgb(43, 78, 89); 
 
    color:white; 
 
    cursor:pointer; 
 
} 
 
body{ 
 
    margin:0; 
 
} 
 
section{ 
 
    background:#ccc; 
 
    height:1000px; 
 
} 
 
#sitenav.fix-header { 
 
    position: fixed; 
 
    width: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    margin:0; 
 
} 
 
#sitenav.fix-header ul{ 
 
    margin:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="clearfix"> 
 
<div id="banner" class="middlecontent"> 
 
    <a href="index.html"><img src="images/logobanner.png"></a> 
 
</div> 
 
<nav> 
 
    <div id="sitenav"> 
 
     <ul> 
 
      <li><a href="index.html">Home</a></li> 
 
      <li><a href="#">Events</a></li> 
 
      <li><a href="#">Curriculum</a></li> 
 
      <li><a href="about_us.html">About</a></li> 
 
      <li><a href="#">Student</a></li> 
 
      <li><a href="#">Staff</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</header> 
 
<!--this for demo for checking scroll--> 
 
<section> 
 

 
</section>

Answer 3

あなたはこのコードを試してみてください。

$(window).ready(function() { 
 
     var header = $('nav').innerHeight(); 
 
     var window_scroll = $(window).scrollTop(); 
 
     if (window_scroll >= header) $("nav").addClass("sticky"); 
 
     else $("header").removeClass("nav"); 
 
    }) 
 
    $(window).on("scroll", function() { 
 
     var header = $('nav').innerHeight(); 
 
     var scroll = $(window).scrollTop(); 
 
     if (scroll >= header) $("nav").addClass("sticky"); 
 
     else $("nav").removeClass("sticky"); 
 
    });

nav{ 
 
    position:absolute; 
 
    width:100%; 
 
    height:50px; 
 
    top:0; 
 
    left:0; 
 
} 
 
nav.sticky{ 
 
    position:fixed; 
 
    width:100%; 
 
    z-index:99; 
 
    top:0; 
 
    left:0; 
 
} 
 
#sitenav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: inherit; 
 
    
 
} 
 

 
#sitenav ul { 
 
    background: black; 
 
    padding: 15px; 
 
} 
 
#sitenav ul li { 
 
    
 
    padding: 15px; 
 
    background: black; 
 
    display: block; 
 
    text-align: center; 
 
    font-family: 'Montserrat', sans-serif; 
 
    display: inline; 
 
} 
 

 
#sitenav ul li:hover { 
 
    background: rgb(43, 78, 89); 
 
    color:white; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 
<header class="clearfix"> 
 
    <div id="banner" class="middlecontent"> 
 
     <a href="index.html"><img src="images/logobanner.png"></a> 
 
    </div> 
 
    <nav> 
 
     <div id="sitenav"> 
 
      <ul > 
 
       <li><a href="index.html">Home</a></li> 
 
       <li><a href="#">Events</a></li> 
 
       <li><a href="#">Curriculum</a></li> 
 
       <li><a href="about_us.html">About</a></li> 
 
       <li><a href="#">Student</a></li> 
 
       <li><a href="#">Staff</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
</header>    
 
</body> 
 
</html>