在滚动和点击事件上向上和向下移动Div？ [英] Move a Div Up and Down on Both Scroll and Click Events?

问题描述

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

I want to make a site similar to chanel.com, where, if you scroll down, a new div moves up to the top of the page. The difference is that, on the site I'm designing, it should also have the same effect on click. On my site, there are two buttons that should also move that same div up and down on click, expanding and collapsing the second section of the site.

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

I got this far by looking at other questions on Stack Overflow, but now I'm stuck. My issue is this: the first time I move the div up and down on click, it works fine. The second time, it's all weird and jumpy. It snaps back, without scrolling up and down.

我在这里的jsFiddle ，以防任何人更容易修改代码。

I've made a simplified version of my site in a jsFiddle here, in case that would make it easier for anybody to modify the code.

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

If anyone can help me out with this problem, it would be greatly appreciated! Here is my code:

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

    });
});

推荐答案

这是一个有效的 jsFiddle 。

您需要更改 0在 scrollDown 事件中到 0％。

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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！