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 回答