2

divがページの上部に到達したときに「スティック」のクラスを追加して、ページの上部に表示されたままにする作業スクリプトがあります。

$(document).ready(function() {
var s = $("#side-div");
var pos = s.position();                    
$(window).scroll(function() {
    var windowpos = $(window).scrollTop() ;

    if (windowpos >= 670) {
        s.addClass("stick");
    } 

    else if ($("body").height() <= ($(window).height() + windowpos)) {

         s.removeClass("stick");    

    }
    else {
        s.removeClass("stick"); 
    }
});

});

その部分は機能します。ただし、この div がページの下部に到達したら、この div を「はがす」ようにしています。実は、フッターが表示されたら剥がそうとしています。しかし、私はその部分に到達することさえできませんでした。

私が使用できるプラグインがそこにあることに気づきました。

http://viget.com/inspire/jquery-stick-em

ただし、プラグインを使用せずにこの効果を達成しようとしています。私は実際に、何よりも jQuery をスクリプト化する方法を学ぼうとしています。

問題の解決に興味がある場合、プラグインを使用するのは簡単で簡単です。しかし、私は他の部分がうまくいかない理由を学ぼうとしています。

洞察をありがとう。

4

2 に答える 2

2

if else ステートメントと条件に問題があります。これを上に置くとif (windowpos >= 670) {、下に達してもこの条件は真のまま実行されます。

また、 を含めたが、実際には使用していないことがわかります。そのため、の位置var pos = s.position();に到達した場合にスティッキーを設定しようとしている可能性があると思います。$("#side-div")

$(document).ready(function() {
    var s = $("#side-div");
    var pos = s.offset().top;  

    $(window).scroll(function() {
        var windowpos = $(window).scrollTop() ;

        if(windowpos + $(window).height() == $(document).height()){
            s.removeClass('stick');
        }else if(windowpos >= pos){
            s.addClass('stick');
        }else{
            s.removeClass('stick');
        }
    });
});

ここにサンプルのフィドルがあります

于 2013-11-03T03:30:28.103 に答える
1

プラスの代わりにマイナスを設定します...私の例では、「else」ステートメントの下に青色が表示されます。

ワーキングフィドルhttp://jsfiddle.net/4YaPw/

$(document).ready(function() {
    $(window).scroll(function() {
        var pos = $("#side-div").position();     
        var windowpos = $(window).scrollTop();

        if (windowpos >= 670)
        {
            $("#side-div").css('background-color', '#8a7b70'); //grey
        } 

        else if ($("body").height() <= ($(window).height() - windowpos))
        {
            $("#side-div").css('background-color', '#ff5400'); //orange
        }
        else
        {
            $("#side-div").css('background-color', '#6f8cc0'); //blue
        }
    });
});
于 2013-11-03T00:13:19.723 に答える