jquery - 如何在滚动时保持标题栏不被切断

Question

我只是想格式化我的标题栏，以便在页面可以左右滚动时不被截断，现在，如果窗口太小，滚动会在原始页面长度处截断该栏:

这是目前的代码:

<div id="head-wrapper">
  <a href=<%=locations_path%>><img src= <%= asset_path('DL_Logo_CMYK.svg') %> id="header-logo" /></a>
  <div id="title">
     <a href=<%=locations_path%>>MapMail</a>
  </div>
  <div id="logged_in_message">
     <% if current_user %>
        <span id="username">Signed in as <strong><%= current_user.name %></strong>.</span>
        <span id="logout"><%= link_to 'Log Out', logout_path, method: :delete %></span>
     <% else %>
       <span id="username">You are not signed in.</span>
     <% end %>
  </div>
</div>

application.css.scss

.....
html {
  height: 100%;
}

body {
  font-family: Lato, sans-serif;
  color: $font-color;
  margin: 0px;
  height: 100%;
}


h1, h2, h3, h4, h5, h6 {
  font-family: GillSansMTBold, "Gill Sans", Calibri, "Trebuchet MS", sans-serif;
  font-weight: bold;
  clear: both;
}

#content {
  margin: 20px;
}

.page-wrapper {
  min-height: 100%;
  margin-bottom: -30px;
}

.page-wrapper:after {
  content: "";
  display: block;
  height: 30px;
}

_header.scss

#head-wrapper {

  overflow: hidden;
  background-color: $base-border-color;
  border-width: 1px;
  border-bottom-style: solid;
  border-color: $medium-gray;
  padding: 5px;

  #title {
    float: left;
    padding: 8px;
  }

  #header-logo {
    height: 30px;
    float: left;
  }

  #logged_in_message {
    padding: 8px;
    float: right;

    #logout {
      padding-left: 10px;
    }

  }

}

我相信这不是特别难，但我还没有太多的 CSS 经验，所以非常感谢任何帮助!

Answer 1

使用:

html{
overflow:hidden;
}

#headerDiv{

width: 100%;

}

编辑:向左/向右滚动时使用 JQUERY 修复标题!!

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 0 //this will be according to the left Attr in css 
    });
});