js css实现跟随,CSS3 + JS 导航栏鼠标跟随效果

最近做一个导航栏跟随效果的页面,于是写了个插件分享一下。

b1b8c7f63f91

example.gif

CSS 设置

.nav {

position: absolute;

top: 30px;

right: 100px;

display: inline-block;

margin: 20px auto;

}

.nav li {

display: inline-block;

margin-right: 20px;

}

.nav li a {

text-decoration: none;

color: #333;

}

.underline {

position: absolute;

top: 30px;

left: 0;

width: 32px;

height: 2px;

background: #333;

-webkit-transition: all .5s;

-moz-transition: all .5s;

-ms-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

HTML 结构

Native 原生写法

// Native

(function () {

var nav = document.querySelector('.nav'),

underline = nav.querySelector('.underline');

nav.addEventListener('mouseover', function (event) {

var _target = event.target;

if (_target.nodeName == "LI" || _target.nodeName == "A") {

underline.style.left = _target.offsetLeft + 'px';

underline.style.width = _target.offsetWidth + 'px';

}

}, false);

})();

jQuery 写法

// jQuery

(function ($) {

var $nav = $('.nav'),

$underline = $nav.find('.underline');

$nav.on('mouseover', 'li', function() {

var _navOffsetLeft = $nav.offset().left,

_targetOffsetLeft = $(this).offset().left,

_targetWidth = $(this).width();

$underline.css({

'left': _targetOffsetLeft - _navOffsetLeft + 'px',

'width': _targetWidth + 'px'

});

});

})(jQuery);

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的实现纵向滚动导航栏并且带有渐变效果的HTML、CSSJS代码示例: HTML代码: ```html <div id="navbar"> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> <li><a href="#section4">Section 4</a></li> <li><a href="#section5">Section 5</a></li> </ul> </div> <div id="section1"> <h2>Section 1</h2> <p>Content goes here...</p> </div> <div id="section2"> <h2>Section 2</h2> <p>Content goes here...</p> </div> <div id="section3"> <h2>Section 3</h2> <p>Content goes here...</p> </div> <div id="section4"> <h2>Section 4</h2> <p>Content goes here...</p> </div> <div id="section5"> <h2>Section 5</h2> <p>Content goes here...</p> </div> ``` CSS代码: ```css #navbar { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: rgba(0, 0, 0, 0.8); z-index: 999; } #navbar ul { display: flex; justify-content: center; align-items: center; height: 100%; margin: 0; padding: 0; list-style: none; } #navbar li { margin: 0 20px; } #navbar a { color: #fff; text-decoration: none; font-size: 18px; font-weight: bold; transition: color 0.2s ease-out; } #navbar a:hover { color: #f00; } .active { color: #f00 !important; } #section1 { height: 500px; background-color: #eaeaea; } #section2 { height: 500px; background-color: #dcdcdc; } #section3 { height: 500px; background-color: #cfcfcf; } #section4 { height: 500px; background-color: #bfbfbf; } #section5 { height: 500px; background-color: #afafaf; } ``` JS代码: ```javascript window.addEventListener("scroll", function() { let navbar = document.getElementById("navbar"); let sections = document.querySelectorAll("section"); let currentSectionIndex = 0; let currentSection = sections[currentSectionIndex]; for (let i = 1; i < sections.length; i++) { if (window.pageYOffset >= sections[i].offsetTop - navbar.offsetHeight) { currentSectionIndex = i; currentSection = sections[i]; } } let links = document.querySelectorAll("#navbar a"); links.forEach(link => link.classList.remove("active")); let activeLink = document.querySelector(`#navbar a[href="#${currentSection.id}"]`); activeLink.classList.add("active"); let percent = (window.pageYOffset - currentSection.offsetTop + navbar.offsetHeight) / (currentSection.offsetHeight - navbar.offsetHeight); let rgba = `rgba(0, 0, 0, ${percent * 0.8})`; navbar.style.backgroundColor = rgba; }); ``` 代码解释: - HTML代码中包含一个固定在页面顶部的导航栏和一些带有ID的部分。 - CSS代码中设置导航栏的样式以及每个部分的背景颜色。 - JS代码中为窗口滚动事件添加了监听器,用于检测当前滚动到哪个部分,并且更新导航栏的样式。在滚动过程中,导航栏的背景色会渐变,从透明到不透明。渐变的程度取决于滚动到当前部分的百分比。同时,导航栏中当前部分的链接会被高亮显示。 希望这个示例能够帮助到你实现纵向滚动导航栏并且带有渐变效果的功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值