Question

你好我认为当我使用鼠标滚轮（鼠标滚动+ 200px一步）时捕获scrolltop的值有问题。它有什么黑客攻击吗？我希望在滚动时将我的元素从左和右移动到页面的中间，这样每个向下滚动的px向左或向右是1px但是当我使用鼠标滚轮时，scrolltop的值会随机跳跃... < / p>

我可以使用条件滚动从10到390的问题吗？

DEMO：https://jsfiddle.net/m9k34m73/

代码：



  $(window).scroll(function () { 
    $('.section-header h1').css({
        'top' : -($(this).scrollTop()/3)+"px"
    }); 
    $('.section-header h3').css({
        'top' : -($(this).scrollTop()/4)+"px"
    }); 
    $('.section-about p').css({
        'top' : -($(this).scrollTop()/2)+"px"
    }); 
    $('.section-about span').css({
        'top' : -($(this).scrollTop()/4)+"px"
    }); 

    //Issue
    if ($(window).scrollTop() > 10 && $(window).scrollTop() < 390) {
        $('.section-profiles .petra p, .section-profiles .petra h3').css({
            'left' : -380 + ($(this).scrollTop()/1)+"px"
        });
        $('.section-profiles .petra img').css({
            'left' : -380 + ($(this).scrollTop()/.5)+"px"
        }); 
        $('.section-profiles .michal p, .section-profiles michal h3').css({
            'right' : -380 + ($(this).scrollTop()/1)+"px"
        });
        $('.section-profiles .michal img').css({
            'right' : -680 + ($(this).scrollTop()/.49)+"px"
        }); 
     }
  });

$(window).scroll(function () { $('.section-header h1').css({ 'top' : -($(this).scrollTop()/3)+"px" }); $('.section-header h3').css({ 'top' : -($(this).scrollTop()/4)+"px" }); $('.section-about p').css({ 'top' : -($(this).scrollTop()/2)+"px" }); $('.section-about span').css({ 'top' : -($(this).scrollTop()/4)+"px" }); //Issue if ($(window).scrollTop() > 10 && $(window).scrollTop() < 390) { $('.section-profiles .petra p, .section-profiles .petra h3').css({ 'left' : -380 + ($(this).scrollTop()/1)+"px" }); $('.section-profiles .petra img').css({ 'left' : -380 + ($(this).scrollTop()/.5)+"px" }); $('.section-profiles .michal p, .section-profiles michal h3').css({ 'right' : -380 + ($(this).scrollTop()/1)+"px" }); $('.section-profiles .michal img').css({ 'right' : -680 + ($(this).scrollTop()/.49)+"px" }); } });

感谢您的时间

Answer 1

在看到你想要实现的目标后，我认为javascript library将解决你所有的问题。

你可以找到它的文档here，但是很简单：

// init controller
var controller = new ScrollMagic.Controller();

// create a scene
new ScrollMagic.Scene({
        duration: 100,    // the scene should last for a scroll distance of 100px
        offset: 50        // start this scene after scrolling for 50px
    })
    .setPin("#my-sticky-element") // pins the element for the the scene's duration
    .addTo(controller); // assign the scene to the controller

使用滚动条或滚轮滚动时，scrollTop上的值不同

1 个答案: