滾動效應，按照在Bootswatch模板

Question

我試圖做固定到頂部時，用戶滾動超越按照這一頁http://bootswatch.com/simplex/

「#subnav」 DIV的高度元素圍繞谷歌尋找的元素，我設法形成以下功能和代碼。

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    if(docViewTop >= elemBottom){ 
    return true; 
    }else{ 
    return false; 
    } 
} 

$(window).scroll(function(){ 
    if(!$("#search_menu").hasClass("subnav-fixed")){ 
     if(!isScrolledIntoView($("#search_menu"))){ 
      $("#search_menu").addClass("subnav-fixed"); 
     }  
    }else{ 

     var docViewTop = $(window).scrollTop(); 
     var docViewBottom = docViewTop + $(window).height(); 

     $("#window_top").html(docViewTop); 
     $("#window_bottom").html(docViewBottom); 
     $("#height").html(element_frm_top); 

     if(docViewTop < element_frm_top < docViewBottom){ 
      $("#search_menu").removeClass("subnav-fixed"); 
     } 
    } 
}); 

使用此。我能夠添加subnav-fixed類，並將div位置固定在頂部。但是在滾動備份之後，我無法讓它恢復原來的位置。不知道哪裏出了問題，或者別人是否有更好的解決方案。

Answer 1

我覺得應該是

$(window).scroll(function(){ 
    if(!$("#search_menu").hasClass("subnav-fixed")){ 
     if(!isScrolledIntoView($("#search_menu"))){ 
      $("#search_menu").addClass("subnav-fixed"); 
     }  
    }else{ 
     if(isScrolledIntoView($("#search_menu"))){ 
      $("#search_menu").removeClass("subnav-fixed"); 
     } 
    } 
}); 

沒有測試。

而且考慮改變if(docViewTop >= elemBottom)到if(docViewTop >= elemTop)

編輯

這取決於你在哪裏把你的#search_menu。假設這將是頂部：40像素應該是：

http://jsfiddle.net/mattydsw/yDPeZ/

function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top - 40; 
    var elemBottom = elemTop + $(elem).height(); 

    if (docViewTop >= elemTop) { 
     return true; 
    } else { 
     return false; 
    } 
} 

$(window).scroll(function() { 
    var $body = $('body'), 
     $menu = $("#search_menu"); 
    if (!$menu.hasClass("subnav-fixed")) { 
     if (isScrolledIntoView($menu)) { 
      $menu.addClass("subnav-fixed"); 
     } 
    } else { 
     if ($(window).scrollTop() <= 40) { 
      $menu.removeClass("subnav-fixed"); 
     } 
    } 
});