Description of Requirement:
Achieve navigation after scrolling through the banner, and then click on the navigation to locate the corresponding module. After scrolling to the corresponding module, navigate to the corresponding area to achieve the highlighting effect~~~
- html+css+js
- swiper+jq
Use html+swiper to achieve page layout
<div class="nav_wrap">
<div class=" nav nav_box2 clearfix swiper-container ">
<div class="swiper-wrapper">
<a href="javascript:;" type="cj" class="swiper-slide fl">初级专场</a>
<a href="javascript:;" type="zk" class="swiper-slide fl on">注会专场</a>
</div>
<a href="javascript:;" class="prev"><img src="./images/left1.png" alt=""></a>
<a href="javascript:;" class="next">
<img src="./images/right1.png" alt="">
</a>
</div>
</div>
Each section is written in the lower half of the page, and the class is named after the type attribute of the a tag. as follows:
<div class="cj hide clearfix">
</div>
<div class="zk on clearfix">
</div>
css part
, write your own specific style~~~~
.hide{
display:none;}
.on{
font-size:18px;color:#c00d0b;width:189px!important;height:70px;
background:url(../images/on.png) no-repeat center !important;background-size:100%;}/*导航选中高亮的样式*/
js part
analysis:
- Click the navigation to locate the corresponding module
- Click the navigation highlight
- Suction top when scrolling larger than banner
- The navigation bar is correspondingly highlighted when scrolling to the corresponding module
var mySwiper=new Swiper(' .nav_box2', {
slidesPerView: 'auto',
spaceBetween: 25,
observer: true,
observeParents: true,
navigation: {
nextEl: '.next',
prevEl: '.prev',
}
})
var _body = $("body");
// 顶部导航栏切换定位
_body
.on({
"click": function () {
var t = $(this),
type = t.attr('type'),
navh = $('.nav').outerHeight();
$('html,body').animate({
scrollTop: $("." + type).offset().top - navh - 50
}, 10, function () {
t.addClass('on').siblings().removeClass('on');
if(index>0){
mySwiper.slideTo(index,0,false);
}
})
}
}, '.nav_box2 a')
function loadStatic() {
// 导航滚动切换
var winh = document.documentElement.clientHeight,
navh = $('.nav').outerHeight(),
scrollh = $('.nav').position().top;
tool.scroll(function (f) {
// 随屏
$('.floors').toggle(f >= scrollh)
// 滚动定位
$('.floor').each(function (index, item) {
if (f > $(item).offset().top - navh - 60) {
$('.nav_box2 a').eq(index).addClass('on').siblings().removeClass('on')
}
})
})
}
loadStatic();
Since there are a lot of my slides, but they all need to be placed in one line, I use the pull function of the swiper tool to achieve the function of stepping forward when I click.
If you don’t have many navigation blocks, you can ignore this~~~