网页右侧固定JS代码实现

发布时间:2017-12-02 21:44:45编辑:丝画阁阅读(278)

//产品详情页
$(function () {

    //大图小图切换(产品主图)
    $(".smallImg img").hover(function () {
        $(this).addClass("on").siblings().removeClass("on");
        $(".bigImg img").hide();
        $(".bigImg img").eq($(this).index()).show();
    });
 
    //页面滚动fixed
    var toTopHeight = $(".proRight").offset().top;
    var sideBottomTop = $(".duoweizi_bottom").offset().top - $(".proRight").height() - 30;
    function rightFixed() {
        if ($(document).scrollTop() > toTopHeight && $(document).scrollTop() < sideBottomTop) {
            $(".proRight").removeClass("absBtm").addClass("fixed");
        }
        else if ($(document).scrollTop() >= sideBottomTop) {
            $(".proRight").addClass("absBtm");
        }
        else {
            $(".proRight").removeClass("fixed absBtm");
        }
    };
    rightFixed();
    //页面滚动
    $(window).scroll(function () {
        var _sideBottomTop = $(".duoweizi_bottom").offset().top - $(".proRight").height() - 30;
        sideBottomTop = _sideBottomTop >= sideBottomTop ? _sideBottomTop : sideBottomTop;
        rightFixed();
    });
    //产品小图第一个class on
    $(".smallImg img").eq(0).addClass("on");
 
});



.proRight {
    background-color: #fff;
    height: auto;
    overflow: hidden;
    width: 245px;
}
.proRight.fixed {
    position: fixed;
    top: 0;
    z-index: 99;
}

关键字