Question

如果用户向下滚动，我希望移动一个div块元素添加和删除一个类。我打算在执行这个JQuery函数时添加/删除一个类：

$(window).scroll(function() {

h = $(window).height();
w = $(window).width();

//jQuery to collapse the navbar on scroll
if ($(".navbar").offset().top > 50) {
    $('.loaded #loader-wrapper .loader-section.section-top').removeClass('.loaded #loader-wrapper .loader-section.section-top ');
    $('.loaded #loader-wrapper .loader-section.section-top').addClass('.loaded #loader-wrapper .loader-section.section-top-collapsed ');    
} else {
    // $(".navbar-fixed-top").removeClass("top-nav-collapse");
    $('.loaded #loader-wrapper .loader-section.section-top').removeClass('.loaded #loader-wrapper .loader-section.section-top-collapsed ');
    $('.loaded #loader-wrapper .loader-section.section-top').addClass('.loaded #loader-wrapper .loader-section.section-top ');
}});

我正是以这种方式编写了课程.loader-section.section-top：

#loader-wrapper .loader-section.section-top {
display:flex;
align-items: center;
justify-content: center;
top:0;
height: 50%;
background:url('../img/thewall.jpg');
background-repeat: no-repeat;
background-position: 0 20%;
text-align: center;

display:flex;
align-items: center;
justify-content: center;

-webkit-box-shadow: 2px 6px 11px -1px rgba(0,0,0,0.31);
-moz-box-shadow: 2px 6px 11px -1px rgba(0,0,0,0.31);
box-shadow: 2px 6px 11px -1px rgba(0,0,0,0.31);

}

当用户打开我的网站时，面板会使用CSS变换向上滑动，就在这个类中：

.loaded #loader-wrapper .loader-section.section-top {
-webkit-transform: translateY(-78%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateY(-78%);  /* IE 9 */
        transform: translateY(-78%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);

}

一旦加载并且用户向下滚动，我希望移动一下面板，所以我写了另一个类：

.loaded #loader-wrapper .loader-section.section-top-collapsed {
-webkit-transform: translateY(-80%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateY(-80%);  /* IE 9 */
        transform: translateY(-80%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);

}

如代码所示，我删除了类.loaded #loader-wrapper .loader-section.section-top并添加了类.loaded #loader-wrapper .loader-section.section-top-collapsed，并在用户向上滑动时执行相反的操作。

这里是html代码：

<div id="loader-wrapper"> 

 ... Main site ...

 <div class="loader-section section-top">

        ... navbar content and other things...

  </div>

  <div class="loader-section section-bottom">

        ...other things...

  </div>
</div>

以及有关如何设置这些元素样式的一些有用信息：

#loader-wrapper {
width: 100%;
height: 100%;
z-index: 1000;  }



#loader-wrapper .loader-section {
position: fixed;
width: 100%;
height: 100%;
z-index: 1001;

}

不幸的是，使用Chrome开发者工具没有任何动作，但我认为这些类已经正确定位，为什么不移动呢？

我忘了，我正在使用JQuery和Bootstrap 3 v1.11.3

使用JQuery addClass（）/ removeClass /（）方法移动div元素

0 个答案: