0

我需要创建一个横幅占位符，该占位符需要与页面一起向上滚动，直到它到达浏览器的顶部边缘，然后它应该固定在顶部。当页面向下滚动时，banner 也需要再次随着页面滚动。我不确定我是否足够清楚，所以你可以在Watch Critic上看到这个例子。您会注意到右栏中的横幅的行为与我所描述的一样。

我没有使用 JavaScript 的经验，所以只能使用 HTML 和 CSS 来实现吗？

4

2 回答 2

0

活生生的例子：http: //jsfiddle.net/KXXhQ/

您需要利用scrolljQuery 的事件，然后将一个新类添加到您的标题中以修复它：

jQuery

  //by default, the static menu is hidden
  var showStaticMenuBar = false;

  //when scrolling...
  $(window).scroll(function () {

      //if the static menu is not yet visible...
      if (showStaticMenuBar == false) {
          //if I scroll more than 200px, I show it 
          if ($(window).scrollTop() >= 200) {
              //showing the static menu
              $('#header').addClass('fixed');

              showStaticMenuBar = true;
          }
      }
      //if the static menu is already visible...
      else {
          if ($(window).scrollTop() < 200) {
              $('#header').removeClass('fixed');

              //I define it as hidden
              showStaticMenuBar = false;
          }
      }
  });

CSS

#header{
    display:block;
    width: 100%;
    height:50px;
    background: #ddff00;
}
#header.fixed{
    position:fixed; 
    top: 0;  /*fixing it at the top*/
    z-index: 999;  /* over any other element*/
}

活生生的例子：http: //jsfiddle.net/KXXhQ/

于 2013-07-10T09:33:59.547 回答
0

这就是您如何在 CSS 中设置要固定的位置。如果你想实现更多的行为，你可以将它们定义为 CSS 类，当你需要改变行为时，只需使用 jQuery 添加和删除类。

于 2013-07-10T10:06:01.223 回答