header中的nav不會移動到在頁面滾動時縮小的元素

我對jQuery或JavaScript知之甚少。所以經過擺弄 - 並失敗 - 幾小時這裏是我的問題：header中的nav不會移動到在頁面滾動時縮小的元素

在我的網站（http://dev.shespeakswithpassionmembership.com/index.php）的標題，我有一個SVG圖像縮小滾動。太好了，它很有用！但是，會發生什麼情況是：菜單不會在縮小的圖像旁邊跳轉。我想這是因爲它節省了很多空間，而且看起來更好。這就是我迄今爲止所做的：圖像以加載爲中心。爲此，我已經加入此CSS來導航欄頭：

.navbar-header { 
    width: 100%; 
}

的形象已經得到了這個CSS：

header.large img { 
    height: auto; 
    margin: 10px auto; 
    max-width: 100%; 
    width: 900px; 
    display: block; 
}

滾動時的圖像縮小。正如你可以看到頭部有一類。大和圖像通過除去類以及。小替換它縮水：

：

header.small img { 
    height: 49px; 
    max-height: auto; 
    width: 154px; 
    max-width: 100%; 
    margin: 10px 5px 0 10px; 
    }

這是通過這個jQuery腳本完成

function slabTextHeadlines(){jQuery("h1.slabbed").slabText({viewportBreakpoint:380,minCharsPerLine:10})}var App=function(){function e(){jQuery.browser.msie&&jQuery.browser.version.substr(0,1)<9&&jQuery("input[placeholder], textarea[placeholder]").each(function(){var e=jQuery(this);jQuery(e).val(e.attr("placeholder")),jQuery(e).focus(function(){e.val()==e.attr("placeholder")&&e.val("")}),jQuery(e).blur(function(){(""==e.val()||e.val()==e.attr("placeholder"))&&e.val(e.attr("placeholder"))})})}function r(){jQuery(".carousel").carousel({interval:15e3,pause:"hover"}),jQuery(".tooltips").tooltip(),jQuery(".popovers").popover()}function o(){jQuery(".search").click(function(){jQuery(".search-btn").hasClass("icon-search")?(jQuery(".search-open").fadeIn(500),jQuery(".search-btn").removeClass("icon-search"),jQuery(".search-btn").addClass("icon-remove")):(jQuery(".search-open").fadeOut(500),jQuery(".search-btn").addClass("icon-search"),jQuery(".search-btn").removeClass("icon-remove"))})}return{init:function(){r(),e(),o()}}}();jQuery(document).on("scroll",function(){jQuery(document).scrollTop()>100?jQuery("header").removeClass("large").addClass("small"):jQuery("header").removeClass("small").addClass("large")}),jQuery(window).load(function(){setTimeout(slabTextHeadlines,.01)}),jQuery(document).ready(function(){jQuery("#totop").hide(),jQuery(window).scroll(function(){jQuery(this).scrollTop()>100?jQuery("#totop").fadeIn():jQuery("#totop").fadeOut()}),jQuery("#totop").click(function(){return jQuery("html, body").animate({scrollTop:0},660,"easeInOutExpo"),!1})}); 
$(function() { 
    $('[data-rspnsv]').rspnsv({delay: 200, duration: 3000}); 
});

對於菜單要跳到svg圖像的右側，我需要刪除寬度：100％;並分配一個寬度：auto;它。我想這樣做是通過在上面的腳本中添加一行代碼，以便它不僅可以替換標題。放大與header.small，但是與navbar標題具有相同的技巧。

有沒有人可以附加腳本來做到這一點？對我來說，對於瞭解jQuery的人來說這似乎相當簡單（我不知道）。

Thanx提前，

託姆

來源

2015-09-03 Thomsterdam Web Design

這是一個CSS問題。它不需要任何jQuery更改。添加這個CSS

header.small .navbar-header{ 
    width: auto; 
}

如果你想讓菜單保持在最下面，這是做到這一點的一種方法。

header.small #js-meganavi{ 
    margin-top: 46px; 
}

來源

2015-09-03 16:19:44 Popnoodles

header中的nav不會移動到在頁面滾動時縮小的元素

回答

相關問題