滾動時隱藏div並在鼠標懸停時顯示它

我想在頁面頂部顯示標題，並在滾動時隱藏它，如this site;我還想在mouseover上顯示標題。但我是一名設計師，而不是程序員，並且正在努力實現它。滾動時隱藏div並在鼠標懸停時顯示它

代碼我迄今爲止：

$(document).ready(function() { 
$('#header').mouseover(function() { 
     $(this).find('.action').show(); 
    }); 
}); 
$(window).scroll(function(){ 
    if ($(this).scrollTop() > 600) { 
     $('#header').fadeOut(); 
    } else { 
     if ($(this).scrollTop() > 100) { 
      $('#header').fadeIn(); 
     } 
    } 
});

來源

2012-09-16 user1612807

的問題是，有沒有辦法觸發鼠標懸停事件時，不會顯示標題。也許你可以在頂部添加一個小盒子，讓你可以將鼠標懸停在它上面，並將標題帶回來。 –

@MichaelWheeler啊，一個div可以覆蓋與標題相同的空間，也許透明背景？我怎樣才能從懸停不同的div來回頭？謝謝！ – user1612807

或者你也可以與頭的透明度發揮。這裏是一個工作示例，使用您的模板：demo jsFiddle

JAVASCRIPT

var header, op = 1; 

$(function(){ 
    header = $("#header"); 
    header.hover(
     function(){ $(this).fadeTo("fast", 1); }, 
     function(){ if (!op) $(this).fadeTo("fast", 0); } 
    ); 
}); 
$(window).scroll(function(){ 
    if ($(this).scrollTop() > 600 && op == 1) { 
     header.fadeTo("slow", 0); 
     op = 0; 
    } else { 
     if ($(this).scrollTop() <= 600 && op == 0) { 
      header.fadeTo("slow", 1); 
      op = 1;    
     } 
    } 
});

來源

2012-09-16 19:49:45 CronosS

謝謝！這看起來像完美的解決方案，但我無法實現它的工作！ – user1612807

@ user1612807檢查出來，應該是好的（我的例子錯了，對不起）：http://jsfiddle.net/6URKw/ – CronosS

問題解決了！先生非常感謝您 – user1612807

在頭部股利頂部並設置爲默認顯示隱藏=創建一個透明假DIV exatly。然後，只要您隱藏標題，只需顯示它即可。這樣你的mourseover效果將起作用。當標題顯示時也隱藏div，否則你將無法點擊標題中的鏈接。

下面是代碼示例

$(document).ready(function() { 
$('#transparent_div').mouseover(function() { 
     $('#header').fadeIn(); 
    }); 
    $('#transparent_div').mouseleave(function() { 
     $('#header').fadeOut(); 
    }); 

}); 
$(window).scroll(function(){ 
    if ($(this).scrollTop() > 600) { 
    $('#transparent_div').show(); 
     $('#header').fadeOut(); 
    } else { 
     if ($(this).scrollTop() > 100) { 
    $('#transparent_div').hide(); 
      $('#header').fadeIn(); 
     } 
    } 
});

來源

2012-09-16 19:32:51

謝謝！這幾乎可以正常工作，但在標題返回時單擊鏈接仍然存在問題。你可以在這裏查看[鏈接]（http://divide.comyr.com/divide_by_two.html）。有什麼建議麼？ – user1612807

滾動時隱藏div並在鼠標懸停時顯示它

回答

相關問題