jQuery 导航条置顶滚动渐变背景透明度

最新推荐文章于 2024-05-15 00:27:17 发布
最新推荐文章于 2024-05-15 00:27:17 发布
阅读量2.2k 收藏 11
点赞数
分类专栏： 网页前端 文章标签： jQuery 导航条 背景透明
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyanzz/article/details/79332475
版权
思路1顶部导航条的背景透明度随着 滚动条滚动的像素 增加或者减少 思路2只要滚动条的像素大于0 就给背景透明度1 然后再给个transitionshijian也有过度效果问题1顶部导航条要使用2层DIV叠加 1层为内容层 1层为作为背景层 如果只是用1层 里面的内容会同时改变透明度问题2透明度和滚动条高度的关系 下面例子 导航条初始透明度是0 当滚动条距离顶部到180像素时（向下滚动180像素时）...
摘要由CSDN通过智能技术生成

思路1

顶部导航条的背景透明度随着 滚动条滚动的像素 增加或者减少 

思路2

只要滚动条的像素大于0 就给背景透明度1 然后再给个transitionshijian也有过度效果

问题1

顶部导航条要使用2层DIV叠加 1层为内容层 1层为作为背景层 如果只是用1层 里面的内容会同时改变透明度

问题2

透明度和滚动条高度的关系 

下面例子 导航条初始透明度是0 当滚动条距离顶部到180像素时（向下滚动180像素时）变为不透明

<!doctype html>  
<html lang="en">  
 <head>  
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">   
  <title>jQue
最低0.47元/天 解锁文章
cyanzz
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery固定导航随页面滚动颜色渐变
10-29
jQuery固定导航随页面滚动颜色渐变
移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单jquery特效
sunsineq的专栏
03-31 1009
项目需要，自己写了一个jquery代码，满足目前移动端常见的效果，就是顶部导航栏随屏幕滑动到指定位置，背景由透明变成不透明。该代码在设置随滚动条其他变化时，同样有效，改变其css即可。一般为了过渡自然，我用了css3的过渡效果。这里我只把关键代码给贴出来。 请转载此文的朋友务必附带原文链接，谢谢。 原文链接：http://xuyran.blog.51cto.com/11641754/1830134 jquery代码如下： $(document).ready(function(){ ...
2024年最全鸿蒙开发自定义渐变导航栏_鸿蒙自定义顶部导航栏，2024年最新阿里测试开发面经
最新发布
2401_84862107的博客
05-15 789
width(34)Stack() {.width(24).width(34).zIndex(1)然后在使用导航栏的页面中引入并添加：接下来我们需要通过页面滑动的偏移量来计算导航栏的透明度，比如我用的是Scroll：Column() {} else {})这样一个渐变的导航栏就完成啦。最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？
滚动渐变导航栏
mengs
02-27 1262
滚动渐变导航栏 教程地址：原文地址（YouTube） B站教程：原文转载（bilibili） 两个视频的内容相同，第二个为转载 效果图 代码区 html <header> <!-- logo --> <a href="#" class="logo">Logo</a> <!-- 导航栏 --> <ul> ...
微信小程序 ---- 导航栏随滚动透明渐变
11-08
该demo采用了opacity和background的rgba两种方法来实现导航栏随滚动透明渐变，但是需要注意的是不兼容IE8及以下的IE浏览器，原因：由于IE8及以下的透明度设置不支持CSS3的opacity属性和rgba颜色值！
jQuery置顶导航
weixin_44269204的博客
05-12 245
Html的代码 <body> <div class="logo_bar">顶部 logo</div> <div class="menu">置顶菜单</div> <div class="menu_pos"></div> <div class="down_con"> <p sty...
jQuery导航条背景滚动高亮显示
11-20
当涉及到动态效果，如“jQuery导航条背景滚动高亮显示”时，我们可以利用JavaScript库jQuery来实现这一功能，提高用户体验。这个特性使得当前浏览的页面对应的导航链接在背景颜色或样式上有所变化，以突出显示，引导...
jQuery实现鼠标响应式透明度渐变动画效果示例
10-18
本示例将详细解析如何使用jQuery实现鼠标响应式透明度渐变动画效果。 首先，我们要理解jQuery的核心概念。jQuery通过选择器选取DOM元素，然后对这些元素进行操作。在这个例子中，我们关注的是`onmouseover`和`...
jQuery实现背景弹性滚动的导航效果
10-22
本文将详细讲解如何使用jQuery来实现背景弹性滚动的导航效果，以及涉及到的jQuery动态操作页面元素样式的技巧。 首先，我们来看HTML结构。一个简单的导航条结构可能如下所示： ```html <li class="current"><a...
jQuery实现的监听导航滚动置顶状态功能示例
10-18
主要介绍了jQuery实现的监听导航滚动置顶状态功能,涉及基于jQuery的事件响应及状态监听等相关操作技巧,需要的朋友可以参考下
导航栏背景下滑显示置顶透明
weixin_45663697的博客
05-07 2336
效果 置顶时 下滑后 代码 html <div id="header"> <header class="headerCon"> <div class="header_txt1 main clearFixed"> <div class="header_logo l"> <p>...
跟随置顶导航条 js例子代码
08-28
一个不错的jquery 导航条置顶的插件.
监听导航滚动置顶
08-18 111
1.js代码 /** * Created by EDUASK on 2016/5/20. */ $(function(){ //引入id标签; var navtive=$("#native"); //设置导航标签为置顶; var offsetTop=navtive.offset().top; //定义一个监听高度; var scrollHei...
导航栏置顶
蹲在人生路上的那只猫
07-06 1474
1、实现顶部和侧边导航吸顶，侧边导航在footer接触导航底部时被上顶。 2、效果图 3、代码段 顶部导航 顶部导航 顶部导航 顶部导航 顶部导航
置顶导航（缓速置顶）
LBY_XK的博客
06-03 153
动画函数 function animate(obj, target, callback) { //obj动画执行者 target移动位置calback用于回调的函数 // 防止重复进行动画命令，完成一次动画再绑定新动画 // 先清除以前的定时器，再进行心得定时器 clearInterval(obj.timer) obj.timer = setInterval(function() { var step = (target - window.pageYOffse
jQuery实现滚动条上下滚动时，div透明度发生改变
羽公子的博客
11-20 1263
css代码 .top{ width:100%; height:3rem; background-color:rgba(173, 216, 230,0); position:fixed; line-height: 3rem; } js代码 $(window).scroll(function(){//window是原生对象，需要加$转换成jQuery对象 ...
html怎么置顶导航栏,html – 如何创建一个粘性导航栏,在滚动后固定到顶部
weixin_29233333的博客
05-30 995
我试图做一个导航栏出现在可视页面的底部，当网站第一次加载，然后当用户向下滚动，导航栏向上滚动，最终固定在顶部。我使用Bootstrap，就像这个网站，但我不知道这个网站是如何做到的。任何帮助？这里是我的导航html和CSS代码：HTML：HomeServicesContact这里是我的CSS：.navbar-fixed-top,.navbar-fixed-bottom{position:fixed...
引用jquery实现边侧栏导航置顶的javascript代码
阿诚哥JC
05-17 293
function power() { h = $(window).height(); t = $(document).scrollTop(); if(t > h) { $('#gotop').show(); } } $(document).ready(function(e) { power(); $('#gotop').click(function(){ $(doc
html导航栏透明渐变效果,Swift - 导航栏滑动透明渐变效果的实现（透明度随视图滚动而改变）...
weixin_29491167的博客
06-03 889
导航栏透明渐变效果在许多 App中也时常会见到。比如下图，导航栏会随着 tableView的滑动而发生不同的变化：默认情况下，导航栏背景是完全透明的。当 tableView向上滑动时，导航栏背景逐渐显示出来。当 tableView下载滑动时，导航栏背景又逐渐消失。 该效果的原理就是根据滚动视图的偏移量来设置导航栏的背景透明度，而监听偏移量的变化有如下两种方式。方法一：通过 scrollV...
jquery css 设置背景图片透明度
05-13
在jQuery中，设置背景图片的透明度可以使用CSS的rgba颜色值来实现。其中，alpha通道值控制透明度，取值范围为0到1。例如，如果要设置背景图片的透明度为50%，可以这样写： ```javascript $('selector').css('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值