Question

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

在我的网站标题（http://dev.shespeakswithpassionmembership.com/index.php）中，我有一个svg图像缩小滚动。好的，它的作品！但是，会发生什么：菜单不会跳缩到缩小的图像旁边。我想要它，因为它节省了大量空间，看起来更好。这是我到目前为止所做的：图像以负载为中心。为此，我已将此CSS添加到navbar-header：

.navbar-header {
    width: 100%;
}

图片有这个CSS：

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

滚动图像缩小时。您可以看到标题有一个 .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图像的右侧，我需要删除宽度：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;
}

标题中的nav不会移动到页面滚动缩小的元素旁边

1 个答案: