css - 标题中的导航不会移动到页面滚动时缩小的元素旁边

Question

我对 jQuery 或 JavaScript 知之甚少。所以在摆弄 - 并且失败 - 几个小时后，这是我的问题:

在我的网站 ( 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 有一个类 .large 并且通过删除该类并将其替换为 .small 来缩小图像:

  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 图像的右侧，我需要删除 width: 100%; 并为其分配一个 width: auto; .我想通过在上面的脚本中添加一行代码来做到这一点，这样它不仅可以用 header.small 替换 header.large，而且可以用导航栏标题。

是否有人可以附加脚本来执行此操作？对我来说，对于了解 jQuery(我不了解)的人来说，这似乎相当简单。

提前致谢，

汤姆

Answer 1

这是一个 CSS 问题。它不需要任何 jQuery 更改。添加此 CSS

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

如果您希望菜单保留在底部，这是一种方法。

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