javascript - 如何制作一个在页面顶部有一点空间后向下滚动的div

Question

我试图让我的导航栏在不使用固定位置的情况下固定在页面顶部，并且只在一定数量的空间后才固定，比如 500 像素。我尝试了许多不同的解决方案，但没有一个有效，因为我的导航非常奇怪。出于某种原因，它在 jsfiddle 中也有效，但在我的网站上无效。

这是一个 jsfiddle of it.

CSS

#background {
  background: lightblue;
  background-position:center top;
}

p {
  font-size:15px; 
  padding-top:100px;
  padding-left:100px;
  padding-right:100px;
}

.rotate {
  float: left;
 -webkit-transform: rotate(180deg) 2s;
  transform: rotate(180deg) 2s;
  transition: all 2s ease;
  transition-delay: 0.4s;
}

.rotate:hover {
          -webkit-transform: rotateZ(-360deg);
          -ms-transform: rotateZ(-360deg);
          transform: rotateZ(-360deg);
}

.container {
    overflow: hidden;
    font-family: 'Roboto Condensed', sans-serif;
    position: static;
  z-index: 150;
  margin-bottom: -80px;
}

.container a {
    float: right;
    font-size: 20px;
    color: black;
    text-align: center;
    padding: 40px 70px;
    text-decoration: none;
        transition: background 1s;
}

.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 20px;
    border: none;
    outline: white;
    color: black;
    padding: 40px 70px;
    background-color: inherit;
    font-family: 'Roboto Condensed', sans-serif;
        transition: background 1s;
}

.container a:hover, .dropdown:hover .dropbtn {
    background-color: lightgreen;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-right: 1px solid #bbb;
}

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

.dropdown-content a:hover {
    background-color: #ddd;
    border-right: 1px solid #bbb;
}

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

HTML

        <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo:200|Open+Sans:300|Quicksand|Roboto+Condensed|Shadows+Into+Light" rel="stylesheet">



    <div class="active">
    <div id="background">
  <div class="opacity">
  <div class="container">
  <div class="rotate">
  <img class="chiz" src="kkk.png" alt="Example">
</div>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
  <a href="FAQ.html">FAQ</a>
  <a href="games.html">Games</a>
    <div class="dropdown">
      <button class="dropbtn" onclick="window.location.href='store.html'">Store</button>
      <div class="dropdown-content">
        <a href="wall.html">Example</a>
        <a href="store.html">Example</a>
      </div>
  </div>

</div>
</div> <p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  </p>

j查询

jQuery(function($) {
  function fixDiv() {
    var $cache = $('.container');
    if ($(window).scrollTop() > 0)
      $cache.css({
        'position': 'fixed',
        'top': '0px'
      });
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto'
      });
  }
  $(window).scroll(fixDiv);
  fixDiv();
});

谢谢，感谢任何帮助:D

Answer 1

我假设 <div class="dropdown">是你的导航栏。

在不使用固定位置的情况下，您可以使用类似 this 的 JS 获取窗口的顶部。回答。

然后运行以下函数，该函数监听窗口滚动事件，然后在滚动一定数量的像素后设置导航栏的顶部以匹配窗口的顶部。

document.onscroll = () => {
  const navbar = document.getElementsByClassName('dropdown')[0];
  let top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

  if(top > 500) {
    navbar.style.top = top;
  } else {
    navbar.style.top = 0;
  }
};

我现在无法对此进行测试。所以它可能有效也可能无效。测试后会更新这个。