现在我正在编写一些培训代码。试图编写一个半固定的页面元素。这是我现在的结果:
$(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");
};
};
});
问题是,我对解决方案不太满意。我希望它更灵活一点。我的目标是一个允许处理各种页面元素的独立函数。像这样的东西:
attachThis(element);
现在我遇到了滚动事件的问题。我不能在函数中包含这个,可以吗?此外,我不知道不覆盖“elementPosition”的好解决方案。我目前的解决方案是在函数之外定义它。不是很干净。
当然我不指望你能提供更好的剧本,但也许你可以把我推向正确的方向并为我指出一个合适的技术?我很想知道专业人士将如何处理这项任务。