导航栏滚动的时候置顶html,html鼠标滚动后导航栏吸顶效果

html鼠标滚动后导航栏吸顶效果

* {

padding: 0;

margin: 0

}

ul, li {

list-style: none;

}

a {

text-decoration: none;

color: #333;

}

.content {

width: 1200px;

margin: auto;

}

.menu {

line-height: 60px;

height: 60px;

}

.menu li {

float: left;

padding: 0 15px;

}

.sticky {

position: fixed;

height: auto;

z-index: 10000;

background-color: #2778af;

width: 100%;

top: 0px;

background-color: rgba(30, 30, 30, 0.94);

border-bottom: none;

padding: 0;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.sticky a {

color: #fff;

}

.banner{

height: 100vh; /*banner高度一屏幕*/

background: pink;

}

.con {

height: 5000px;

}

$(window).scroll(function() {

var wScroll = $(this).scrollTop();

if (wScroll > 0) {

$('.menu-box').addClass('sticky');

} else {

$('.menu-box').removeClass('sticky');

}

});

• 首页
• 关于我们
• 产品中心
• 新闻中心
• 联系我们