隱藏標題並將它下面的div貼到滾動條頂部

-1

我試圖隱藏標題，並在用戶開始向下滾動頁面時將div粘貼到頂部（僅位於標題下方）。隱藏標題並將它下面的div貼到滾動條頂部

它應該保持在頂部，直到用戶從頂部到達350px。
當用戶向上滾動時，只應顯示標題，而不是其下面的div。

我試過css（粘滯和固定的位置），但它沒有給出所需的結果。

這裏是我的fiddle

這裏是jQuery的（我不擅長），我試圖（和別人的幫助下），但這是什麼，我想實現只有25％。

$(function(){ 
    $(window).scroll(function(e) { 
    if($(this).scrollTop()>300){ 
     $('.header').fadeOut(); // Fading in the button on scroll after 300px 
    } 
    else{ 
     $('.header').fadeIn(); // Fading out the button on scroll if less than 300px 
    } 
    }); 
});

來源

2017-07-18 Rahul

爲此，您將需要jQuery。你的js代碼在哪裏？ –

我已經將它加入小提琴中。 – Rahul

沒有。沒有js。 –

不能用css來做這個事情。檢查jquerys Scroll event，可能soloution

$(window).scroll(function(e){ 
    var $el = $('.fixedElement'); 
    var isPositionFixed = ($el.css('position') == 'fixed'); 
    if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $('.fixedElement').css({'position': 'fixed', 'top': '0px'}); 
    } 
    if ($(this).scrollTop() < 200 && isPositionFixed) 
    { 
    $('.fixedElement').css({'position': 'static', 'top': '0px'}); 
    } 
});

增加了一個在全soloution的評論鏈接。

來源

2017-07-18 12:12:07 ThunD3eR

不，它不能解決我的目的，它也可能已經完成與CSS單獨（位置：粘滯） – Rahul

從你正在嘗試做psotion：粘不會涵蓋所有方面。位置：sticky僅定位某個元素，但您描述的邏輯必須用事件觸發，因此我推薦滾動事件。我會建議你嘗試一下。 – ThunD3eR

儘管這個鏈接可能回答這個問題，但最好在這裏包含答案的基本部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [來自評論]（/ review/low-quality-posts/16748206） –

您需要將標題和.newswrap設置爲position: fixed。然後這將工作。

$(document).ready(function(){ 
    $(window).scroll(function() { 
     if($(window).scrollTop() < 350) { 
      $("header").show(); 
      $(".newswrap").hide(); 
     } else { 
      $("header").hide(); 
      $(".newswrap").show(); 
     } 
    }); 
});

來源

2017-07-18 14:21:16 Nicholas

隱藏標題並將它下面的div貼到滾動條頂部

回答

相關問題