代码之家  ›  专栏  ›  技术社区  ›  sarah3585

在窗口滚动上移动元素

  •  8
  • sarah3585  · 技术社区  · 7 年前

    您将在这个jsfiddle中看到 https://jsfiddle.net/xpvt214o/402281/ 在窗口滚动条上有一个图像在另一个图像中滚动。 我如何修改下面的内容,以便它在到达该元素之前(在所有br标记之后)不会开始滚动? 我试过抵消它,但没有任何进展。

    如果滚动慢一点也可以。

    jQuery(document).ready(
    function() {
    
    var $w = $(window);
    var $d = $('.oh');
    
    $(window).scroll(function(event) {
      var st = $w.scrollTop();
    
      _x = st;
    
      lastScrollTop = st;
    
      $d.css('bottom', _x);      
    
    });
    
    });
    

    这是我想要达到的目标的一个例子 https://www.sketchapp.com/

    1 回复  |  直到 7 年前
        1
  •  2
  •   sarah3585    7 年前

    我找到了这个

    https://codepen.io/JTParrett/pen/BkDie

    $.fn.moveIt = function(){
    var $window = $(window);
    var instances = [];
    
    $(this).each(function(){
    instances.push(new moveItItem($(this)));
    });
    
    window.addEventListener('scroll', function(){
    var scrollTop = $window.scrollTop();
    instances.forEach(function(inst){
      inst.update(scrollTop);
    });
    }, {passive: true});
    }
    
    var moveItItem = function(el){
    this.el = $(el);
    this.speed = parseInt(this.el.attr('data-scroll-speed'));
    };
    
    moveItItem.prototype.update = function(scrollTop){
      this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 
    'px)');
    };
    
    // Initialization
    $(function(){
      $('[data-scroll-speed]').moveIt();
    });