Question

现在我正在研究一些训练代码。试图编写一个半固定的页面元素。这是我现在的结果：

$(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”的好方法。我目前的解决方案是在函数之外定义它。不是很干净。

当然我不希望你提供更好的剧本，但也许你可以把我推向正确的方向并为我指出合适的技巧？我很想知道专业人士如何处理这项任务。

Answer 1

Just put your code in a function，将#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");
        };
    }
}

Answer 2

您可以定义一个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();
})

如何将我的脚本包装成一个函数？专业的方法？

2 个答案: