网站的导航条下的指示器

Posted 2021-01-13 doufh610

eg：一般情况下，网站上的导航条会吸顶或者不做处理的，在处理吸顶情况：指示器的颜色会有不同的需求，在默认进入页面首页时，导航条的指示器颜色时黑色（看公司需求确定），鼠标在悬停到某一个产品会展示下方信息，一般的写法用对应的hover事件处理时没有问题的。在需要吸顶后在改变鼠标悬停的效果并且当前的指示器需要改变颜色（和之前的颜色不同）为白色。我们一般遇到会先到时在监听滚动时，去处理对应的事件，是没有问题的。但是呢，在遇到是要鼠标悬停时再去改变事件的时候，我们就不应再用hover  事件去处理，我们要怎么处理呢？？？这个原理是一样的，只是处理的方式会更符合自己的需求；

鼠标悬停当前产品，展示更多信息，可以使用toggle属性处理；eg：$(‘找到对应节点‘).hover(function(){ 

$(找到需要展示更多信息的节点).stop().slideToggle(); 

stop();slideToggle();自行搜索即可找到对应用法。

});

直接给出方案，各位有更好的方法可以一起分享，一起进步。一下是自己的解决方案：

现在是使用jQuery做的：

// 鼠标进入时的处理

$(‘获取到对应的Dom节点‘).mouseenter(function(){

   // 获取当前滚动高度的判定处理

　　滚动的高度H

　　if（$(document).scrollTop() >= H）{

 　　　　// 这里是处理滚动一定高度需要改变的指示器颜色

     　　　$(this).css({对应的css样式})

　　} else {

　　　　$(this).css({还原原来对应的css样式})

}

   

})；

// 鼠标离开时的处理

$(‘获取到对应的Dom节点‘).mouseleave(function(){

 　　// 这里是处理滚动一定高度离开需要改变的指示器颜色

　　if（$(document).scrollTop() >= H）{

　　　　$(this).css({对应的css样式设置为none})

 

　　} else {

　　　　$(this).css({对应的css样式设置为none})

　　}

 

});