当点击按钮时，将标题移动到顶部

-1

我滚动一定数量后出现一个粘有标题的“按钮”。我希望该按钮在用户单击时将标题移回顶端，但我希望页面保持在它所处的位置。当点击按钮时，将标题移动到顶部

$(document).scroll(function() { 
var y = $(this).scrollTop(); 
if (y > 55) { 
    $('.bottomMenu').fadeIn(); 
} else { 
    $('.bottomMenu').fadeOut(); 
}});$("body a.rep").live('click', function(){$(this).parents('#header').hide().prependTo("body").slideDown();});

来源

2014-01-07 Jacob

你可以看到我的回答。我更新了它，它工作。 – Khamidulla

-1

你的脚本改为....

var closed = false; 

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 55 && !closed) { 
     $('.bottomMenu').fadeIn(); 
    } else { 
     $('.bottomMenu').fadeOut(); 
    } 

}); 

$("div.bottomMenu").on('click', function(){ 
    $('#header').css('position','static'); 
    $('div.bottomMenu').hide(); 
    closed = true; 
});

请注意，我改变头的位置，以静态和附加click事件到div而不是anchor。您可能想重新考虑这一点，并使用css类而不是直接操作css属性。另外，我将头部封装在块div内，因此它很好地为头部保留了一些空间，而不是使用边距。

Working Fiddle

来源

2014-01-07 01:52:48 Leo

这很好，但是如何防止按钮在点击后再次出现？ – Jacob

使用标志确定是否显示按钮... http：//jsfiddle.net/ZyKar/688/ – Leo

-1

不要使用.live（）使用。对（）。 .live（）已弃用。查看here进行演示。

var clicked_btn = false; 

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 

    if(clicked_btn) 
    { 
     if(y < 55) 
     { 
      clicked_btn = false; 
      $('#header').css('position','fixed'); 
     } 
    } 
    else 
    { 
     if (y > 55) 
     { 
      $('.bottomMenu').fadeIn(); 
     } 
     else 
     { 
      $('.bottomMenu').fadeOut(); 

     } 
    } 
}); 
$("a.rep").on('click', function(){ 
    $('#header').css('position','relative'); 
    $(this).parent().hide(); 
    clicked_btn = true; 
});

我改变标题的位置CSS属性，所以它会上升，当你点击x锚标记。然后我隐藏了锚标签的父项（它会将css的显示属性更改为无）。并将anchor标记记录为clicked_btn为True。而在窗口的滚动事件我检查锚标记的状态，如果它是假的逻辑代码将被执行，如果它是真实的，滚动条的位置小于55px它会改变锚标记的状态为false并设置回标题的CSS属性固定。

来源

2014-01-07 01:38:36 Khamidulla

当点击按钮时，将标题移动到顶部

回答

相关问题