當點擊按鈕時，將標題移動到頂部

-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

當點擊按鈕時，將標題移動到頂部

回答

相關問題