我正在尝试实现徽标在此页面中的效果,它固定在页面顶部,但是向下滚动时,只有一部分仍然可见,而不是整个元素。
我发现很多 jquery 插件可以将元素的顶部保持在页面的顶部,但是没有一个可以让我自定义元素的高度。我的 javascript 无法从头开始编写代码。有人对可能有用的插件有任何建议吗?
我正在尝试实现徽标在此页面中的效果,它固定在页面顶部,但是向下滚动时,只有一部分仍然可见,而不是整个元素。
我发现很多 jquery 插件可以将元素的顶部保持在页面的顶部,但是没有一个可以让我自定义元素的高度。我的 javascript 无法从头开始编写代码。有人对可能有用的插件有任何建议吗?
你不应该为此需要插件。CSS 可以保持徽标固定,并且一旦用户开始滚动页面,您就可以使用 JavaScript 更改元素的显示。
假设您的徽标具有徽标 ID,则 CSS 将是:
#logo {
top: 0;
position: fixed;
}
由于您似乎正在使用 jQuery,因此您可以执行以下操作:
$(function() {
// gets a reference to the document based on which browser is being used
var oDoc = $.browser.msie === true ? window : document;
// event handler for when the user scrolls
$(oDoc).scroll(function() {
// if the user is at the top, display the whole image
if($(this).scrollTop() === 0) {
$('#logo').css('margin-top', 0);
// otherwise, pull the image up a single em (200 is arbitrary)
} else if($(this).scrollTop() > 200) {
$('#logo').css('margin-top', '-1em');
}
});
});