Question

我想创建一个类似于chanel.com的网站，如果向下滚动，新的div会向上移动到页面顶部。不同之处在于，在我设计的网站上，它也应该对点击产生相同的影响。在我的网站上，有两个按钮也可以在点击时上下移动相同的div，扩展和折叠网站的第二部分。

我通过查看Stack Overflow上的其他问题得到了这一点，但现在我被卡住了。我的问题是这样的：我第一次在点击时上下移动div，它运行正常。第二次，这一切都很奇怪和跳跃。它会快速向后拍摄，而不会上下滚动。

我在a jsFiddle here制作了我网站的简化版，以防任何人修改代码。

如果有人可以帮我解决这个问题，我们将不胜感激！这是我的代码：

var ovf, slider;

$(function(){
    ovf = this.getElementById("signUp");
    slider = this.getElementById("intro");
    winResize();
    $(window).bind({resize: winResize, scroll: winScroll});

});

function winResize(){   
    ovf.style.top = slider.offse## Heading ##tHeight + "px";
}

function winScroll(){
var op = 1 - ($(document).scrollTop() / slider.offsetHeight);
}

$(document).ready(function(){
    $("#scrollDown a").live('click',function(e){
       console.log('test');
       $('#signUp').animate({
    top: '0',
  }, 500, function() {
    // Animation complete.
  });

    });
});

$(document).ready(function(){
    $("#scrollUp a").live('click',function(e){
       console.log('test');
       $('#signUp').animate({
    top: '99%',
  }, 500, function() {
    // Animation complete.
  });

    });
});

Answer 1

这是一个有效的jsFiddle。

您需要在0事件中将0%更改为scrollDown。

function winScroll(){
var op = 1 - ($(document).scrollTop() / slider.offsetHeight);
}

$(document).ready(function(){
    $("#scrollDown a").live('click',function(e){
       console.log('test');
       $('#signUp').animate({
    top: '0%',
  }, 500, function() {
    // Animation complete.
  });

    });
});

$(document).ready(function(){
    $("#scrollUp a").live('click',function(e){
       console.log('test');
       $('#signUp').animate({
    top: '100%',
  }, 500, function() {
    // Animation complete.
  });

    });
});

在滚动和点击事件上向上和向下移动Div？

1 个答案: