Question

我有一个固定的标题，在标题中，徽标和高度在滚动时发生变化，一切正常，除非您调整浏览器窗口大小，所有内容都保留在原位但导航条被剪切。有谁知道如何解决这个问题？

导航栏和徽标图像使用Jquery更改，我使用宽度：100％;在标题和导航栏宽度：700px;徽标是浮动的：左边和导航栏是浮动的：右边。

当我调整窗口大小时，

标题的一半会消失。我想要的是在调整浏览器窗口大小时显示所有内容的标题。

	$(function() {
	  var shrinkHeader = 100;
	  $(window).scroll(function() {
	    var scroll = getCurrentScroll();
	    if (scroll >= shrinkHeader) {
	      $('.head').addClass('shrink');
	      $('#logo').hide();
	      $('#postLogo').addClass('now').show();
	    } else {
	      $('.head').removeClass('shrink');
	      $('#logo').show();
	      $('#postLogo').addClass('now').hide();
	    }
	  });

	  function getCurrentScroll() {
	    return window.pageYOffset;
	  }
	});

.head {
  width: 100%;
  min-width: 1350px;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
#logo {
  margin-top: 5px;
  float: left;
  cursor: pointer;
}
#menu_list {
  width: 655px;
  margin-top: 20px;
  float: right;
}

<div class="head">
  <div id="header">
    <div id="logo">
        <img/>
    </div>
    <div id="postLogo" style="display:none">
      <img/>
    </div>
    <div id="menu">
      <ul id="menu_list">
        <li>1</a></li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    <!--end menu-->
  </div>

Answer 1

提供您的＆＃34;导航＆＃34;表示您的#memu_list - 请在问题中更明确 - 您必须设置相对宽度（例如%或em）

每次调整浏览器窗口大小时，如何避免导航栏被切断？

1 个答案: