“崩溃”位置：使用jquery固定元素

发布于 2024-10-21 01:16:38 字数 239 浏览 6 评论 0原文

我正在尝试实现徽标在此页面中的效果，它固定在顶部页面，但向下滚动时，只有一部分可见，而不是整个元素。

我发现很多 jquery 插件可以将元素的顶部保持在页面顶部，但没有一个插件可以让我自定义元素的高度。我的 JavaScript 无法从头开始编写代码。有人对可能有用的插件有什么建议吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鲜血染红嫁衣 2024-10-28 01:16:38

您不需要为此使用插件。 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');
    }

  });

});

You shouldn't need a plugin for this. CSS can keep the logo fixed and you can use JavaScript to change the display of the element once the user begins to scroll the page.

Assuming that your logo has the ID of logo, the CSS would be:

#logo {
  top: 0;
  position: fixed;
}

Since it appears you're using jQuery, you can do something like this:

$(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');
    }

  });

});

回复收藏 0 原文

~没有更多了~