网页右侧固定JS代码实现

发布时间：2017-12-02 21:44:45编辑：丝画阁阅读（740）

//产品详情页
$(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");
 
});