Question

我有两张图片bttimg1和bttimg2，我想根据滚动高度切换它们，并在其div中淡出back-to-top。用户滚动以下内容后;

    jQuery(document).ready(function(){
    var offset1 = (screen.availHeight / 2);
    var offset2 = (screen.availHeight * 2);
    var duration = 300;
    jQuery(window).scroll(function(){
        if (jQuery(this).scrollTop() < offset1) {
            jQuery('.back-to-top').fadeOut(duration);
        } else if ((jQuery(this).scrollTop() > offset1) || (jQuery(this).scrollTop() < offset2)) {
            jQuery('.back-to-top').fadeIn(duration);
            jQuery('#bttimg1').css('opacity', '0');
            jQuery('#bttimg2').css('opacity', '0.7');
        } else if (jQuery(this).scrollTop() > offset2){
            jQuery('.back-to-top').fadeIn(duration);
            jQuery('#bttimg1').css('opacity', '0.7');
            jQuery('#bttimg2').css('opacity', '0');
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });
});

这是我使用的jQuery脚本，但图像的不透明度不会发生变化！我哪里错了？

Answer 1

在你的第二个条件下，你不应该使用||但&&。

不是＆＃34;如果滚动位于offset1 或 offset2＆＃34;

之间

但是＆＃34;如果滚动位于offset1 AND offset2＆＃34;

之间

PS：在这种情况下，我建议您使用>=和<=而不是>和<。

Answer 2

我希望这会有所帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <style>
    body{
        height:2000px;
    }
    .back-to-top {
        position: fixed;
        bottom: 2em;
        right: 2em;
        width:60px;
        height:60px;
        background:url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTKCUJxMxuTn0RaQ2YMuTHBysnBisYffTXy-h-3QIiC9VcPKcwQN2_7uyjT") no-repeat;
        background-position:top right;
        background-size:60px 60px;
    }

    .back-to-top:hover {   
        background:url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTKCUJxMxuTn0RaQ2YMuTHBysnBisYffTXy-h-3QIiC9VcPKcwQN2_7uyjT") no-repeat;
        background-position:top right;
        background-size:60px 60px;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    jQuery(document).ready(function() {
        var offset = 200;
        var duration = 500;
        jQuery(window).scroll(function() {
            if (jQuery(this).scrollTop() > offset) {
                jQuery('.back-to-top').fadeIn(duration);
            } else {
                jQuery('.back-to-top').fadeOut(duration);
            }
        });

        jQuery('.back-to-top').click(function(event) {
            event.preventDefault();
            jQuery('html, body').animate({scrollTop: 0}, duration);
            return false;
        })
    });
    </script>
    <body>

        <a href="#" class="back-to-top"></a>

    </body>
    </html>

jQuery上升按钮出现并消失

2 个答案: