3

我想创建一个类似于 chanel.com 的网站，如果向下滚动，一个新的 div 会向上移动到页面顶部。不同的是，在我正在设计的网站上，它对点击也应该有相同的效果。在我的网站上，有两个按钮也应该在单击、展开和折叠网站的第二部分时上下移动相同的 div。

通过查看 Stack Overflow 上的其他问题，我走到了这一步，但现在我被困住了。我的问题是：我第一次在点击时上下移动 div，它工作正常。第二次，这一切都很奇怪和神经质。它弹回，无需上下滚动。

我在这里的 jsFiddle中制作了我的网站的简化版本，以防任何人更容易修改代码。

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

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.
  });

    });
});
4

1 回答 1

1

这是一个工作jsFiddle。

您需要在活动中更改您的0to 。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.
  });

    });
});
于 2013-03-25T23:37:13.977 回答