Question

我将开始链接到我所指的website。

这个one是一个官方网站，已经有了这个功能，可能你会更好地理解我的意思！

我已经制作了两个部分，并应用了一个仅需一个鼠标滚动的滚动条就能自动进入下一部分。

但是在这个页面中，我在第二部分有一个表，一个很长的表，所以我更喜欢禁用该部分的固定视图并启用正常滚动以查看整个表。 / p>

但是，当我向上滚动直到第二部分的结尾时，我希望能够切换回另一个滚动条，准备回到第一部分。

这是我的JS脚本：

$(document).ready(function() {
    $('#fullpage').fullpage({
        css3: true,
        scrollingSpeed: 600,
        autoScrolling: true,
        fitToSection: true,
        fitToSectionDelay: 1000,
        scrollBar: false,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        //Design
        controlArrows: true,
        verticalCentered: true,
        sectionsColor: ['#ccc', '#fff', '#cfc'],
        fixedElements: '#header, .footer',
        responsiveWidth: 0,
        responsiveHeight: 0,
    });
});

我正在使用FullPage来做这件事，也许你们中的一些人已经知道了。

修改

这是body 设置，2 section s，#first和#second，每个都在div之内.section div内的div个#fullpage和<div id="fullpage"> <div class="section" id="first"> <p style="color:#fff; margin-bottom: 50px; font-size: 5em; text-align: center;">Staff</p> </div> <div class="section" id="second">  <table> ... </table> </div> </div>个：

Library.find({
  'id': libraryID,
  'collections.id': CollectionID,
  'collections.subCollections.id': subCollectionID
}, { 'collections.subCollections.$': 1 }, function(err, data) {
  console.log(err, data);
})

Answer 1

我无法为您做更多事情，这是一个 fiddle! 对您的问题进行黑客攻击，而不仅仅是一个解决方案，但希望它能激发您找到一个解决方案更好的方法和解决方案

jQuery的：

var sec=0;
$('#first').on('mousewheel', function(event) {
     console.log('scroll, '+sec+", "+$("#fullpage").scrollTop());
     if(sec == 0 && $("#fullpage").scrollTop()!=0){
        $("#first").slideUp(300,function(){
          $("#second").show(function(){
            $("#second").scrollTop(1);
          });
        });
     }
});

$('#second').on('mousewheel', function(event) {
   if(sec==0){
    sec=1;
   }
   console.log($("#second").scrollTop());
   if($("#second").scrollTop() == 0){
     sec=0;
     $("#second").hide();
     $("#first").slideDown(300, function(){
        $("#fullpage").scrollTop(0);
     });
   }
});

以及CSS的加法：

#first{
  margin-top:0px;
  margin-left:0px;
  height:401px;
  overflow-y: auto;
}
#second{
  display:none; 
  margin-top:0px;
  margin-left:0px;
  height:100%;
  overflow-y: auto;
}
#fullpage{
  height:400px;
  overflow: hidden;
  overflow-y: auto;
}

我真的很喜欢编程，但是有自己开发和维护的软件;）

从平滑滚动到正常滚动，反之亦然

1 个答案: