Move a Div Up and Down on Both Scroll and Click Ev

2019-07-01 11:20发布

问题:

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.

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.

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

    });
});

回答1:

Here is a working jsFiddle.

You need to change your 0 to 0% inside your scrollDown event.

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

    });
});


标签: jquery scroll