WordPress的粘滯導航欄當管理欄存在時

我在我的站點中使用了這個粘性的jQuery插件作爲頂部導航欄。 jQuery Sticky WordPress的粘滯導航欄當管理欄存在時

它工作正常，但當WP管理欄存在，覆蓋頂部的導航欄。我試圖依賴性粘性的管理欄：

jQuery(document).ready(function($){               
    if ($("#wpadminbar").length) { 
       $("#navbar").sticky({topSpacing:"28px"}); 
        } else { $("#navbar").sticky({topSpacing:0}); 
          }         
       });

但這滾動不僅當立即卡住導航欄頂端。我很感激任何幫助。由於

來源

2014-03-04 agva

你需要寫類似的滾動監聽器。 – AloneInTheDark

你確定你沒有在其他地方調用'.sticky'嗎？另外，Wordpress和一些插件可能會導致一些依賴性問題。我總是在Wordpress中使用jQuery [noConflict]（https://api.jquery.com/jQuery.noConflict/）模式。 –

不能只調整navbar的margin-top？

我沒有使用Sticky插件，但我有類似的問題，下面的代碼解決。

(function($) { 
    'use strict'; 

    $(document).ready(function() { 
     // if adminbar exist (should check for visible?) then add margin to our navbar 
     var $wpAdminBar = $('#wpadminbar'); 
     if ($wpAdminBar.length) { 
      $('div.navbar').css('margin-top',$wpAdminBar.height()+'px'); 
     } 
    }); 
})(jQuery);

來源

2014-04-28 12:50:26 Alex

你好，對於遲到的答案感到抱歉。是的，你的解決方案是有效的，稍作修改。非常感謝你！ – agva

@agva，很高興它的工作，請注意，'wpadminbar'（至少在3.9）也有響應（如果窗口變小，高度變化），所以你可能需要''綁定''窗口''resize'事件，也許是'滾動'，祝你好運 – Alex

可以從示出

的add_filter（ 'show_admin_bar'， '__return_false'）禁用管理欄;

來源

2014-03-04 16:03:06 davidcondrey

不是他問的。 –

這是我的最後腳本。也許這對其他人會有幫助。

jQuery(document).ready(function($){                
     var $wpAdminBar = $('#wpadminbar'); 
     if ($wpAdminBar.length) { 
     $("div.navbar").sticky({topSpacing:$wpAdminBar.height()}); 
     } else { 
     $("div.navbar").sticky({topSpacing:0}); 
    }  
});

來源

2014-05-08 13:13:05 agva

我覺得它不像你想要的那麼複雜。如果某人登錄，則可以測試「已登錄」類的主體元素。除非我錯過了明顯的東西，否則這對我很有用。

if($("body").hasClass("logged-in")) { 
    $("#site-navigation").sticky({topSpacing: 28, className: "stickyNav"}); 
} else { 
    $("#site-navigation").sticky({topSpacing: 0, className: "stickyNav"}); 
}

來源

2014-05-10 21:34:38 Paul

也許你是對的，但每個用戶都可以禁用WordPress管理員/用戶配置文件設置上的管理欄。因此，在這種情況下，如果用戶禁用並登錄，那麼即使管理欄不存在，粘貼也會將28px添加到頂部。我對嗎？ – agva

你會是對的。有趣的是，我錯過了直到現在。 – Paul

/* This is Fix CSS for WP Admin Bar */ 
@media screen and (min-width: 601px) { 
    .logged-in.admin-bar #navbar-default.affix-top { margin-top: 31px !important; } 
    .logged-in.admin-bar #navbar-default.affix { margin-top: 32px !important; } 
    body.logged-in .navbar-default.affix{ top:32px } 
    .navbar-default.affix{ width:100%;top:0px;z-index:999;border-radius:0;border:none } 
} 
@media screen and (max-width: 782px) and (min-width: 601px) { 
    .logged-in.admin-bar #navbar-default.affix-top { margin-top: 0px !important; } 
    .logged-in.admin-bar #navbar-default.affix { margin-top: 46px !important; } 
    .logged-in.admin-bar #xs-phone { margin-top: 45px !important; } 
} 
@media screen and (max-width: 600px) { 
    .logged-in.admin-bar #xs-phone { padding-top: 45px !important; } 
    .navbar-default.affix{position: relative !important;} 
}

，並添加的functions.php

add_action('get_header', 'remove_admin_login_header'); 
function remove_admin_login_header() { 
    remove_action('wp_head', '_admin_bar_bump_cb'); 
}

來源

2016-01-21 21:44:20

WordPress的粘滯導航欄當管理欄存在時

回答

相關問題