Question

我试图将底部的粘性导航栏同样放在顶部但不起作用。例如：每当我滚动直到导航栏它不应该是可见的，如果我到达导航栏位置，总是应该打开导航栏。请说明为什么它不起作用。

我想通过纯CSS而不是bootstrap来完成。

测试页：https://codepen.io/burner/pen/qVVomv

<% ruby_var = 15 %>
var jsVar = <%= ruby_var %>;
// jsVar => 15

var jsVar = 15;
<% ruby_var = jsVar %>

var navbar = document.getElementById("navbar");
var sticky = $(navbar).height() - top - link.height();

function myFunction() {
  if (window.pageYOffset < sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Answer 1

正如我在你的问题的评论中所说，你的js / jq代码缺少你使用的不同变量的一些值。

无论如何，我制作了一个实现你想要的jQuery代码。见下文或此处＆gt; jsFiddle

代码很简单。您可以将导航栏的位置与滚动距离进行比较。记住导航和窗口的高度

var navbar = $("#navbar"),
  nTop = navbar.offset().top,
  nBottom = nTop + navbar.outerHeight()
$(window).on("scroll", function() {
  var wScroll = $(this).scrollTop(),
    stickyHere = wScroll + $(this).height()

  if ((nBottom < stickyHere) && (nTop > wScroll)) {
    navbar.addClass("sticky")
  } else {
    navbar.removeClass("sticky")
  }
})

body {
margin:0;
}
div {
  margin: 0;
  font-size: 28px;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  bottom: 0;
  width: 100%
}

.sticky + .content {
  padding-top: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>


<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>
<div class="header">
  <h2>Scroll UP</h2>
  <p>Scroll up to see the sticky effect.</p>
</div>

粘性导航栏无法在底部工作？

1 个答案: