Question

首先，我想说我是JS的新手。我已经尝试解决了一段时间，但是找不到解决方案。我的简单粘性导航栏有一个小问题（我希望是这样，这很小！）。确实，position: fixed;一定是个错误。当导航栏被隐藏而section-feauters出现时，我想达到一种粘滞效果。我将不胜感激！这是我的一些HTML代码

HTML：

   <header>
    <nav id="navbar">
        <img src="resources/img/onlinelogomaker-051519-2011-4086.png" class="mainlogo">
        <ul class="main-nav" id="js--main-nav">
            <li><a href="#">Main Page</a></li>
            <li><a href="#">Prices</a></li>
            <li><a href="#">Offer</a></li>
            <li><a href="#">About us</a></li>

        </ul>
        <a href="javascript:void(0);" class="mobile-nav-icon" onclick="myFunction2()">
            <ion-icon name="menu"></ion-icon>
        </a>

    </nav>

    <div class="main-header">
            <h1>Get up and let's go to the new natural world</h1>
            <a class="btn btn-join" href="#">Join me!</a>
            <a class="btn btn-read" href="#">Read more</a>
        </div>
</header>
<section class="section-feauters">
        <div class="section group">
            <h2>Leave the old life - You can do it</h2>
            <p class="desc-section-feauters">Do you want to be faster, healthier and better inside? Do you feel the desire in heart? Do you remember the superheroes of your best childhood years? It's not a joke you can try it now! It's not a joke, dare! You won't regret, just <strong>NATURE - ACTIVE!</strong></p>

    </div>
</section>

这是粘性的CSS样式响应：

.main-nav {
    float: right;
    margin: 25px 15px;
    list-style: none;
    overflow: hidden;
}

.main-nav li {

    display: inline-block;
    margin: 30px;

}

.main-nav li a:link,
.main-nav li a:visited {
    color: #ffffff;
    padding-bottom: 10px;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;


}

.main-nav li a:hover,
.main-nav li a:active {
    color: #fbf9ee;
    border-bottom: 3px solid #c47519;

}

/* Nav responsive */


/*Sticky navi*/

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 3px 13px #dedede;
    z-index: 9999;

}

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
    padding: 15px 0;
    color: #555;

}

和js

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Answer 1

您的导航栏工作正常。您看不到它，因为您的身体没有足够的内容滚动。设置身体高度以查看其工作原理

body{ height:2000px;}

Check the link

Answer 2

我解决了这个问题。我为if语句sticky && window.pageYOffset> 670添加了一个条件，现在解决方案看起来像这样：

function myFunction() {
    var navbar = document.getElementById("navbar");
    var sticky = navbar.offsetTop;
    console.log(sticky);

       if (window.pageYOffset > sticky && window.pageYOffset> 670) {
            navbar.classList.add("sticky")
            console.log(sticky);
        } else {
            navbar.classList.remove("sticky");
        }
    }

也许对其他人有用。

粘性导航栏的问题不会像应该滚动的那样

2 个答案: