分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

网站的导航条下的指示器

发布时间:2023-09-06 02:18责任编辑:傅花花关键词:暂无标签

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})

  }

});

网站的导航条下的指示器

原文地址:https://www.cnblogs.com/doufh610/p/9795063.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved