Question

我正在创建一个网站/投资组合，我想制作第二个导航栏＆＃34;粘贴＆＃34;一旦用户向下滚动，这将保持固定在页面顶部，我尝试使用许多教程，但它们似乎都不起作用，这是完成此任务的最简单方法。

＆＃34;这是我想要坚持的Div的代码。＆＃34;

          <div id="SecondNavBar" style="background-image: url('Images/SecondNavBar/SecondNavBar.fw.png'); height: 40px; width: 1211px;">

Answer 1

使用jquery.waypoints + waypoints-sticky http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/waypoints.min.js"></script>
<script src="/path/to/waypoints-sticky.min.js"></script>

<script>$('.my-sticky-element').waypoint('sticky');</script>

Answer 2

如果窗口scrollTop值较大，则导航栏的偏移顶部值添加固定到#SecondNavBar的类别，否则删除固定的类：）

＆＃13;

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

＆＃13;

#SecondNavBar {
  height: 40px;
  width: 1211px;
  background: red;
}
.fixed {
  position: fixed;
  top: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>

<div id="SecondNavBar"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse neque animi dolores inventore hic quidem vero nihil tempora itaque et voluptas facilis magni incidunt dolore nisi ratione cumque quod!</p>

＆＃13;

Sticky Div / Nav Bar

2 个答案: