Question

我的网站左下角有一个带浮动箭头的网站，显示一个向下的箭头。

现在，我希望在用户滚动到页面底部后，使箭头指向上方更改箭头div的类。

一旦我们接近底部（从底部+ 200px，我的选择），我能够让div类改变，但是一旦用户开始滚动到顶部，类就不会改变。

我尝试过toggleClass（）但是当用户向上滚动时箭头会闪烁。我已经尝试了removeClass（），并且运行良好，它删除了类。我尝试过addClass（）但是什么也没做。

你们能帮帮我吗？

以下是代码段：

$(window).scroll(function() { 

    if($(window).scrollTop() + $(window).height() < ($(document).height())-200) {

        $("#floatingArrow").addClass('floatingArrowDown');

    } else if($(window).scrollTop() + $(window).height() > ($(document).height())-200) {

        $("#floatingArrow").addClass('floatingArrowUp');

    }
});

我已经将网络接地了，而且我已经从阅读网站上的文章中获得了大部分内容，但我无法使其发挥作用。

由于

Answer 1

尝试$("#arrowDV").removeClass( "arrowDown" ).addClass( "arrowUp" );我使用了一个示例mark-up，此解决方案有效。

$( document ).ready(function() {
$(window).scroll(function() { 
if($(window).scrollTop() + $(window).height() < ($(document).height())-200) {
    $("#arrowDV").addClass('arrowDown');
} else if($(window).scrollTop() + $(window).height() > ($(document).height())-200) {
$("#arrowDV").removeClass( "arrowDown" ).addClass( "arrowUp" );
}
});
});


.arrowUp
{
background-image: url('url');
height:1000px;
background-repeat:no-repeat;
background-position: right bottom;
}
.arrowDown
{
background-image: url('url');
height:1000px;
background-repeat:no-repeat;
background-position: right top;
}

<div id="arrowDV" class="arrowUp"></div>

<强> DEMO

Answer 2

你可以试试这个，

HTML

Scroll me down<br><br>
<p>im here</p>
<a href="#" class="scrollup">
<a href="#" class="scrolldown">

CSS

.scrollup
{
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 10px;
    right: 30px;
    display: none;
    background: url( 'Source' ) no-repeat;
    opacity: 0.3;
    filter: alpha(opacity=30);
    outline: 0px none;
    outline-width: 0px;
    outline-style: none;
    outline-color: -moz-use-text-color;
}

.scrolldown
{
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 50px;
    right: 30px;
    display: none;
    background: url( 'Source' ) no-repeat;
    opacity: 0.3;
    filter: alpha(opacity=30);
    outline: 0px none;
    outline-width: 0px;
    outline-style: none;
    outline-color: -moz-use-text-color;
top:20px;
}

Jquery的

  $(document).ready(function(){
      $('.scrolldown').fadeIn();
         $(window).scroll(function(){
           if($(window).scrollTop() + $(window).height() == $(document).height())
           {
                $('.scrollup').fadeIn();
                $('.scrolldown').fadeOut();
            } else {
                $('.scrolldown').fadeIn();
                $('.scrollup').fadeOut();
            }
        });
    });

Fiddle

滚动时jQuery更改类

2 个答案: