如何使用滚动更改导航栏背景? [英] How to Change Navigation Bar Background with Scroll?
问题描述
我是网络开发新手.对于我的一个项目,我想在用户滚动时更改导航栏的背景.我希望它看起来像这样:https://www.nlogic.co/understanding-vlan-hopping-attacks/一个>
这是我的代码:
nav .row {边距右:0px;}导航{边框:2px 脊 #999;位置:固定;}导航里{向左飘浮;列表样式:无;填充:20px 30px;}导航{白颜色;字体大小:20px;}.btn 按钮 {背景色:透明;白颜色;边距:10px 30px;填充:10px 25px;边框:2px 实心 #999;边框半径:5px;}.btn 按钮:悬停 {边框:2px纯白色;边框半径:10px;}
</nav>
我不擅长 jQuery.事实上,我只知道 Javascript 的基础知识.如果有人能在这里帮助我,我将非常感激.
试试这个:
$(document).ready(function(){$(window).on("滚动",function(){if($(document).scrollTop() > 150)$(".col-md-12").css({backgroundColor:"gray",position:"fixed"});别的$(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});})})
最终代码:
<html lang="zh-cn"><头><风格>身体 {高度:1500px;}导航 .row{边距右:0px;}导航{边框:2px 脊 #999;位置:绝对;}导航 li{向左飘浮;列表样式:无;填充:20px 30px;}导航{白颜色;字体大小:20px;}.btn 按钮{背景色:透明;白颜色;边距:10px 30px;填充:10px 25px;边框:2px 实心 #999;边框半径:5px;}.btn 按钮:悬停{边框:2px纯白色;边框半径:10px;}</风格>头部><身体><nav class="col-md-12"><div class="row"><ul class="col-md-8"><li><a href="#">关于</a></li><li><a href="#">联系方式</a></li><div class="clearfix"></div><div class="btn col-md-4"><button>注册</button><按钮>登录按钮>
</nav><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><脚本>$(document).ready(function(){$(window).on("滚动",function(){if($(document).scrollTop() > 150)$(".col-md-12").css({backgroundColor:"gray",position:"fixed"});别的$(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});})})