Descripción del requisito:
Después de que la navegación se desplaza a través del banner, se succiona la parte superior y el módulo correspondiente se ubica después de hacer clic en la navegación. Después de desplazarse al módulo correspondiente, se realiza el área correspondiente de la navegación para lograr el efecto de resaltado ~~~
- html + css + js
- swiper + jq
Utilice html + swiper para lograr el diseño de la página
<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>
Cada sección está escrita en la parte inferior de la página, y la clase lleva el nombre del atributo type de la etiqueta a. como sigue:
<div class="cj hide clearfix">
</div>
<div class="zk on clearfix">
</div>
parte css
, escribe tu propio estilo específico ~~~~
.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%;}/*导航选中高亮的样式*/
análisis de la parte js :
- Haga clic en la navegación para ubicar el módulo correspondiente
- Haga clic en el resaltado de navegación
- Ventosa cuando se desplaza más grande que el banner
- La barra de navegación se resalta correspondientemente cuando se desplaza al módulo correspondiente
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();
Dado que hay muchas de mis diapositivas, pero todas deben colocarse en una línea, utilizo la función de extracción de la herramienta deslizante para lograr la función de dar un paso adelante cuando hago clic.
Si no tiene muchos bloques de navegación, puede ignorar esto ~~~