Question

对于我的网站，我正在使用这两种效果 - Show footer on scroll down和show header on scroll up。但是.nav-down和nav.up元素相互干扰，这会导致两种效果错误。有没有办法为特定元素添加样式？ Here's my code。你看到只有标题如何工作，而不是页脚？

Answer 1

我这段代码：

$('header').removeClass('nav-up').addClass('nav-down');

导航和导航只是两个类名，一个添加到标题，另一个删除。

没有两个元素，只有两个类名更改为header元素。这意味着此代码仅影响一个元素标题。如果您的页脚有不必要的影响，我确定这与上面的代码无关。你需要搜索这样的东西：

$('footer').removeClass('nav-up').addClass('nav-down');

Answer 2

您可以使用以下更改来修复它，以对页眉和页脚产生相反的效果：

<强> JQuery的

  if (st > lastScrollTop && st > navbarHeight){
            // Scroll Down
            $('header').removeClass('nav-down').addClass('nav-up');

             // I added this 
            $('footer').removeClass('nav-up').addClass('nav-down');
        } else {
            // Scroll Up
            if(st + $(window).height() <= $(document).height()){
              $('header').removeClass('nav-up').addClass('nav-down');

              // I added this 
              $('footer').removeClass('nav-down').addClass('nav-up');
            }

<强> CSS

/* Change the height of footer to become 100px */



 footer {
    height: 100px; /*instead of 50px*/
    }

如何为1个特定元素添加CSS样式

2 个答案: