使用css+js怎么才能做到这样的效果(见详情)
发布网友
发布时间：2022-04-06 12:11
共1个回答
热心网友
时间：2022-04-06 13:41
(function(){
$(window).on('scroll',function(){
var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'),
top;
if($.browser.webkit)
$body = $('body');
//上面是获取浏览器窗口的属性之类的东西啦
var headHeight = $('#head').height();
//假设你导航上面是head这个div,要获取一下这个的高度
top = $body.scrollTop()> headHeight;
//假设鼠标骨下来的高度大于你上面获取的那个div的高度，然后进行下面的判断,只要是滑下面的高度大于head的高度，下面的if都成立
if(top){
$('#nav').addClass('fdstyle');
//其实就是你那个head滑不见的时候，则#nav加一个样式。样式需要注意一下，写成始终居于顶部的样式
}else{
$('#nav').removeClass('fdstyle');
$('#nav').removeAttr('style');
//当鼠标滑上去。那个头部head可以看见了，即条件不成立的时候，则去掉那个样式，用正常的样式。
}
});
})();
对了，新写的样式，一定要记得权重提高一些，要比正常的class权重高，不然样式冲突的话，会无法实现。
比如正常的样式用#nav {...} 则这个.fdstyle 则需要再拉一层# ，比如#main .fdstyle 具体可以百度一下CSS选择器权重
