0

現在、私は小さなトレーニングコードに取り組んでいます。半固定のページ要素をコーディングしようとしています。これは今までの私の結果です：

$(document).ready(function () {
    var elementPosition = $("#header").offset();
    var elementHeight = $("#header").outerHeight();
    $("#header").before("<div id='placeholder' style='display:none; height:" + elementHeight + "px'></div>");
    $(window).scroll(function () {
        checkAttached("#header");
    });

    function checkAttached(element) {
        var windowDepth = $(window).scrollTop();
        if (windowDepth >= elementPosition.top) {
            $(element).addClass("attached");
            $("#placeholder").css("display", "block");
        } else {
            $(element).removeClass("attached");
            $("#placeholder").css("display", "none");
        };
    };
});

http://jsfiddle.net/9xM3W/

問題は、私はその解決策にあまり満足していないということです。もう少し柔軟にしたいと思います。私の目標は、さまざまなページ要素に対処できる独立した関数です。このようなもの：

attachThis(element);

現在、スクロールイベントで問題が発生しています。これを関数内に含めることはできませんね。さらに、「elementPosition」を上書きしないための良い解決策がわかりません。私の現在の解決策は、関数の外でそれを定義することです。あまりきれいではありません。

もちろん、私はあなたがより良いスクリプトを提供することを期待していませんが、多分あなたは私を正しい方向に押して、私に適したテクニックを指摘することができますか？専門家がこのタスクにどのように取り組むか知りたいです。

4

2 に答える 2

1

コードを関数に入れて、#headerのようなパラメータに置き換えてくださいelement。グローバルスコープにあるコードには何もないので、これを行うことに問題はありません。

function attach(element){
    var el = $(element),
        elementPosition = el.offset(),
        elementHeight = el.outerHeight(),
        placeholder = $("<div style='display:none; height:" + elementHeight + "px'></div>");

    el.before(placeholder);
    $(window).scroll(function () {
        checkAttached(el);
    });

    function checkAttached(element) {
        var windowDepth = $(window).scrollTop();
        if (windowDepth >= elementPosition.top) {
            $(element).addClass("attached");
            placeholder.css("display", "block");
        } else {
            $(element).removeClass("attached");
            placeholder.css("display", "none");
        };
    }
}
于 2013-02-26T19:55:57.197 に答える
0

jqueryメソッドを定義できます

jQuery.fn.fix = (function($){
                    return function(){
                        var selection = this,
                            elementPosition = selection.offset(),
                            elementHeight = selection.outerHeight();
                        selection.before("<div id='placeholder" + 
                                              selection.attr('id') + 
                                           "' style='display:none;    height:"+elementHeight+"px'></div>");
                        $(window).scroll(function(){
                            var windowDepth = $(window).scrollTop();
                            if (windowDepth>=elementPosition.top) {
                      selection.addClass("attached");
                              $("#placeholder").css("display", "block");
                            } else {
                              selection.removeClass("attached");
                              $("#placeholder").css("display", "none");
                         };
                      });
                    return this;
                    };
                }(jQuery));

そして、このように使用します

$(function(){
    $("#header").fix();
})
于 2013-02-26T20:02:03.043 に答える