Javascript 导航栏粘滞收缩不工作_Javascript_Jquery_Html_Css

Javascript 导航栏粘滞收缩不工作

javascript jquery html css

Javascript 导航栏粘滞收缩不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个简单的导航条工作导航条的粘性收缩 HTML:- <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script>

我有一个简单的导航条工作导航条的粘性收缩

HTML:-

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript" src="script.js"></script>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <header></header>

    <nav id="nav" class="nav">
        <div class="nav__inner">
        </div>
    </nav>

    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt id error ut delectus a sapiente accusantium quam, laudantium, atque laborum, distinctio. Commodi perspiciatis ipsa ducimus labore, iure dignissimos fugit quae.</p>
    </div>

    <footer>This is footer</footer>

</body>
</html>

JS:-

我希望这段代码在页面滚动时将蓝色导航条的高度从80px缩小到50px

我所做的就是从中复制代码。但我并没有得到所提到的链接中显示的效果。蓝色导航条在滚动页面时没有像链接中那样收缩。可能的问题和解决方案是什么。

只需更改：

&.is-shrunk {
        height: 50px;
}

切换到以下内容，并将其从CSS中的嵌套.nav选择器中取出。

.nav.is-shrunk {
        height: 50px;
}

Ampersand（&）是一个SASS嵌套选择器，您也可以这样做无嵌套操作，如下所示

const nav=document.getElementById（'nav'）；
const navFromTop=nav.offsetTop；
const navHeight=nav.offsetHeight；
常量距离滚动=（）=>{
返回窗口.pageYOffset；
};
常量isScrolledEnough=（）=>{
返回（距离滚动（）>navFromTop+navHeight）；
};
常量setIsShrunk=（值）=>{
if（值（&isScrolledEnough（））{
nav.classList.add（'is-shrink'）；
}如果（！值）{
nav.classList.remove（'is-shrink'）；
}
};
window.addEventListener（'scroll'，（）=>{
setIsShrunk（距离滚动（）>导航高度）；
});
*{
框大小：边框框；
}
身体{
字体系列：“helvetica neue”；
字母间距：0.03em；
颜色：#333；
}
标题{
高度：150像素；
背景：黑色；
}
页脚{
高度：50px；
背景：黑色；
颜色：淡蓝色；
}
.导航{
位置：粘性；
排名：0；
高度：80px；
背景：道奇蓝；
过渡：高度200ms；
}
.nav.is-SHRENK{
高度：50px；
}

Lorem ipsum dolor sit amet，奉献精英。因缺乏智慧而导致的身份错误、劳丹、劳动、区别。劳动透明通透性检查，是一项非常重要的检查
白背飞虱。临时性的，必要的，临时性的，必要的，必要的！我的眼睛是透明的
Lorem ipsum dolor sit amet，奉献精英。因缺乏智慧而导致的身份错误、劳丹、劳动、区别。劳动透明通透性检查，是一项非常重要的检查
白背飞虱。临时性的，必要的，临时性的，必要的，必要的！我的眼睛是透明的
Lorem ipsum dolor sit amet，奉献精英。因缺乏智慧而导致的身份错误、劳丹、劳动、区别。劳动透明通透性检查，是一项非常重要的检查
白背飞虱。临时性的，必要的，临时性的，必要的，必要的！我的眼睛是透明的
这是一个非常重要的问题，它是一个非常重要的问题，它是一个非常重要的问题。卓越，实习
我们的智慧来自于劳动，我们的智慧来自于我们的智慧，我们的智慧来自于我们的智慧，我们的智慧来自于我们的智慧，我们的智慧来自于我们的智慧，我们的智慧来自于我们的智慧，我们的智慧来自于我们的智慧，我们的智慧来自于我们的智慧。布兰迪提斯，我的圣母玛利亚，我阻止了你，我的前妻
因此，在准解决方案中，临时发明家应充分利用非自愿自由意识。全方位的发明者，不包括雷克桑科的雷克恩德雷特
事实上，在明确无误的劳动条件下，错误表现为面部动物腐败和对大权力的绝对自由。Facere，ducimus。即使是在办公室里，我也会去
这是页脚我已经试过了…但仍然不适用于我…可能有什么问题…@Space运行代码段，并在代码中提供足够的数据，以便它能够滚动您没有的内容。是的，我运行了它…代码段工作正常，但当我在pc中使用它时，它不工作…请对照代码检查您的CSS，这是唯一需要修改才能工作的东西。是的，足够的内容使内容向下滚动，足够缩小它。在浏览器中使用Inspector查看代码中是否有错误。无法读取null的属性“offsetTop”…页面检查后出错。。。
&.is-shrunk {
        height: 50px;
}

.nav.is-shrunk {
        height: 50px;
}