图像后如何使导航栏粘贴在页面顶部？

Question

I'm trying to make the navbar stick to the top of the page after the header has been scrolled by. 标题滚动后，我试图将导航栏粘贴到页面顶部。

So it would be something similar to this, codepen.io , but with a picture. 因此，它将类似于codepen.io ，但带有图片。 So with the picture, it would be stretched to across most of the screen, but it also adjusts depending on how big the window is. 因此，对于图片，它将被拉伸到整个屏幕的大部分，但它也会根据窗口的大小进行调整。 Therefore I can't just say after 200px, make the navbar stick, because the image would vary in size. 因此，我不能仅说200像素后，将导航条固定住，因为图像大小会有所不同。 If possible, is there a way to make a Javascript function that will register for once getting to the bottom of any element, the navbar will stick? 如果可能的话，是否有一种方法可以使Javascript函数在到达任何元素的底部时立即注册，导航栏会停留在上面？

HTML: HTML：

    <header>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt="">
  </header>

  <nav id = "nav_bar">
      <ul class = "navbar-list">
          <li>
              <a href="">link1</a>
          </li>
          <li class="dropdown">
              <a href="#" class="dropbtn">link2</a>
                  <div class="dropdown-content">
                      <a href="#">link 1</a>
                      <a href="#">link 2</a>
                      <a href="#">link 3</a>
                      <a href="">link 4</a>
                  </div>
          </li>
          <li>
              <a href="">link 3</a>
          </li>
          <li>
              <a href="">link4</a>
          </li>
      </ul>
  </nav>

<body>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

CSS: CSS：

body{
margin:0px;
}

header{
margin: 0 auto;
/*position: fixed;*/
top: 0;
}


img{
max-width: 100%;
text-align: center;
top: 0;
display: block;
}

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


ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
} 

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
 }

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: green;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

codepen.io -- include a sample image codepen.io-包含样本图片

Answer 1

Something like this 像这样

 var nav_bar_top_offset = $('#nav_bar').offset().top; $(window).scroll(function() { if ($(this).scrollTop() > nav_bar_top_offset) { $('#nav_bar').addClass('fixed'); } else { $('#nav_bar').removeClass('fixed'); } });

 body { margin: 0px; } header { margin: 0 auto; /*position: fixed;*/ top: 0; } section{background:#fff} img { max-width: 100%; text-align: center; top: 0; display: block; } .navbar-fixed { top: 0; z-index: 100; position: fixed; width: 100%; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: green; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .fixed{ position:fixed; top:0; width:100%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <header> <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt=""> </header> <nav id="nav_bar"> <ul class="navbar-list"> <li> <a href="">link1</a> </li> <li class="dropdown"> <a href="#" class="dropbtn">link2</a> <div class="dropdown-content"> <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> <a href="">link 4</a> </div> </li> <li> <a href="">link 3</a> </li> <li> <a href="">link4</a> </li> </ul> </nav> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </section>

Answer 2

Like you used the Tutorial Codepen, just change the selectors of the example to your selectors. 就像您使用Tutorial Codepen一样，只需将示例的选择器更改为选择器即可。

Try this: 尝试这个：

var  mn = $("#nav_bar");
    mns = "navbar-fixed";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

Here's the codepen 这是codepen

Remember : If you set your navbar to sticky, the space where the navbar was will be removed. 切记：如果将导航栏设置为粘性，导航栏所在的空间将被删除。 So it could happen that your navbar will be over your first line of text. 因此，导航栏可能会超出文本的第一行。 Just add to your header a padding of the height of your navbar. 只需在标题中添加导航栏高度的填充即可。 This can be done in your js too. 这也可以在您的js中完成。

Either you add a class with this padding or you add it manually. 您可以使用此填充来添加类，也可以手动添加。 Here are the examples: 以下是示例：

$('header').addClass("extraPadding"); // extraPadding is the class that you have to create

or 要么

$('header').css("padding-bottom", "40"); // 40 could be the height of your navbar

Answer 3

I think what you are trying to achieve is this. 我想您要达到的目标是这样。 Hope will help you. 希望会对您有所帮助。 Hit on the Run code snippet to see it in action. 点击“ Run code snippet以查看其Run code snippet 。

First you check when you reach the element you want to stay fixed while scrolling and add the fixed class, and then if you scroll back you remove it. 首先，您检查何时到达要在滚动时保持固定的元素，并添加fixed类，然后如果您向后滚动，则将其删除。

 var navBarOffset = $('#nav_bar').offset().top; $(window).scroll(function() { var navBar= $('#nav_bar'); var scroll = $(window).scrollTop(); if (scroll >= navBarOffset ) { navBar.addClass('fixed'); } else { navBar.removeClass('fixed'); } });

 body { margin: 0px; } header { margin: 0 auto; /*position: fixed;*/ top: 0; } .fixed { position: fixed; top:0; left:0; width: 100%; } img { max-width: 100%; text-align: center; top: 0; display: block; } .navbar-fixed { top: 0; z-index: 100; position: fixed; width: 100%; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: green; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt=""> </header> <nav id="nav_bar"> <ul class="navbar-list"> <li> <a href="">link1</a> </li> <li class="dropdown"> <a href="#" class="dropbtn">link2</a> <div class="dropdown-content"> <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> <a href="">link 4</a> </div> </li> <li> <a href="">link 3</a> </li> <li> <a href="">link4</a> </li> </ul> </nav> <body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> <footer> </footer>

Answer 4

var nav = $('.adjustlink');
    var pos = nav.offset().top;

    $(window).scroll(function (){
        var fix = ($(this).scrollTop() > pos) ? true : false;
        nav.toggleClass("fix-nav", fix);
    });

hope this one help you fiddle 希望这一个帮助你拨弄

图像后如何使导航栏粘贴在页面顶部？

问题描述

4 个解决方案

解决方案1
1 2016-11-24 08:36:44

解决方案2
1 2016-11-24 08:37:09

解决方案3
0 2016-11-24 08:37:05

解决方案4
0 2016-11-24 09:03:30

图像后如何使导航栏粘贴在页面顶部？

问题描述

4 个解决方案

解决方案1 1 2016-11-24 08:36:44

解决方案2 1 2016-11-24 08:37:09

解决方案3 0 2016-11-24 08:37:05

解决方案4 0 2016-11-24 09:03:30

解决方案1
1 2016-11-24 08:36:44

解决方案2
1 2016-11-24 08:37:09

解决方案3
0 2016-11-24 08:37:05

解决方案4
0 2016-11-24 09:03:30