电商楼层跳转效果

来源：互联网发布：经传软件基础盈利模式编辑：程序博客网时间：2024/04/20 12:27
电商楼层动态跳转效果
具体代码如下
电商首页楼层左侧边栏效果    头部
        11111
        22222
        33333
        44444
        55555
        66666
        77777
        88888
        底部
    
                1
            2
            3
            4
            5
            6
            7
            8
        
    
// JavaScript Document$(window).scroll(function(){var winscroll = $(window).scrollTop();var divtop = $(".floor").offset() == null ? 0 : $(".floor").offset().top;//左侧边栏显示/隐藏if (winscroll > divtop) {$(".side-nav").show();} else {$(".side-nav").hide();}var limax = 0;$(".floor").each(function (index, element) {//console.log($(".floor:eq(" + index + ")").offset().top);if (winscroll > $(".floor:eq(" + index + ")").offset().top - 200) {limax += 1;}});var amin = limax - 1;//console.log(amin);$(".side-nav ul li").removeClass("active");$(".side-nav ul li:eq(" + amin + ")").addClass("active");});$(document).ready(function() {    $(".side-nav ul li a").click(function(event){event.preventDefault();//取消a标签的默认动作console.log($(this).attr("data-target"));var atop = $("#" + $(this).attr("data-target") + "").offset() == null ? 0 : $("#" + $(this).attr("data-target") + "").offset().top; $('body,html').animate({scrollTop: atop - 40}, 200);});});@charset "utf-8";/* CSS Document */*{margin:0;padding:0;}a{ text-decoration:none;}.box{width:1200px;margin:0 auto;}.box header{height:200px; line-height:200px; text-align:center; font-size:24px; border:1px solid #ccc; margin-bottom:20px; border-top:none;}.box .floor{height:600px; line-height:600px; text-align:center; font-size:100px;border:1px solid #ccc; margin-bottom:20px;}.box footer{height:200px; line-height:200px; text-align:center; font-size:24px; border:1px solid #ccc; border-bottom:none;}.side-nav{ position:fixed;top:50%; left:50%; margin-left:-670px; margin-top:-120px; display:none; height:auto;}.side-nav ul{ list-style:none;}.side-nav ul li{ width:50px; height:30px; line-height:30px; background-color:#000; text-align:center;}.side-nav ul li a{ color:#fff;}.side-nav ul li:hover{ background-color:#fff;}.side-nav ul li:hover a{ color:#000;}.side-nav ul li.active{ background-color:#fff;}.side-nav ul li.active a{ color:#000;}
0 0