Question

我想用一个固定顶部的导航栏（整个页面宽度）来实现一个非常简单的布局，并在其下方填充两列（一列col-2，另一列col-10）来填充剩余的高度。第一列设置为postion: fixed，因为只有第二列是可滚动的。

虽然我能够做到这一点，但是当我将列包装在容器中时，左侧的固定列的宽度却超出了其应有的宽度：

<div class="container" style="width:50%;">
    <div class="row">
        <div class="col-2 bg-primary" style="position:fixed;">
        Test
        </div>
    </div>
    <div class="row">
        <div class="col-2 bg-primary">
        Test
        </div>
    </div>
</div>

Here's a very simple snippet，当一列固定位置时显示此行为。

为什么这样做？有办法吗？

Answer 1

根据我的理解，您想要一个固定的导航栏，并希望在导航栏下方设置两列。在该列中，第一列应该是粘性的，第二列应该是可滚动的。下面是相同的工作片段

.sticky-top {
  z-index: 9999;
  height:100%;
}

.main {
  top: 56px!important; /*set it according to height of nav bar*/
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class='container-fluid'>
    <div class='row'>
      <div class='col-2 align-self-start sticky-top main'>
       sidebar1
      </div>
      <div class='col-10 main'>
        This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar
        will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until
        the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main
        will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar
        will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until
        the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main
        will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar
        will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until
        the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main
        will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar
        will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until
        the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main
        will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar
        will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until
        the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main
        will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar
        will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until
        the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main
        will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar
        will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until
        the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main
        will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar
        will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until
        the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main
        will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar will stick to the top. This main will continue scrolling until the bottom while the sidebar
        will stick to the top.
      </div>
    </div>
  </div>

</body>

</html>

Answer 2

如果用户在IE和旧版浏览器中遇到粘性问题，则此JS可能会有用，而不是'position：sticky'CSS。

(function($) {
	$.fn.sticky = function( options ) {
		var settings = $.extend({
			stickyTop : 0,
			stickyBottom : 0,
			widthLimit: 0,
			stickyClass: false,
			stickyParent: false
		}, options);
		return this.each( function() {
			var $ele = $(this);
			var eleTop, eleLeft, eleBottom, eleParBot, eleWid, winWid
			var r = function(){
				eleTop = $ele.offset().top - settings.stickyTop;
				eleLeft = $ele.offset().left;
				eleBottom = $ele.offset().top + $ele.innerHeight() + settings.stickyBottom;
				$eleParent = $ele.parents(settings.stickyParent) || $ele.parent();
				eleParBot = $eleParent.offset().top + $eleParent.innerHeight();
				eleWid = $ele.innerWidth();
				winWid = $(window).outerWidth();
				f();
			}
			var f = function(){
				var winTop = $(window).scrollTop();
				if(winTop >= eleTop && winWid > settings.widthLimit){
					$ele.css({
						'position': 'fixed',
						'top': settings.stickyTop,
						'left': eleLeft,
						'width': eleWid
					});
					if (settings.stickyClass != false) {
						$ele.addClass(settings.stickyClass);
					}
					if(winTop >= eleParBot-$ele.innerHeight()-settings.stickyTop+settings.stickyBottom){
						$ele.css('top', (winTop - eleParBot + $ele.innerHeight() - settings.stickyBottom) * -1);
					}
					else{
						$ele.css('top', settings.stickyTop);
					}		
				}
				else{
					$ele.removeAttr('style').removeClass(settings.stickyClass);
				}
			}
			r();
			$(window).scroll(f);
			$(window).resize(function(){
				$ele.removeAttr('style');
				r();
			});
		});
	}

}(jQuery));
$(document).ready(function() {
	$('.header-logo').sticky({
		stickyParent: 'body',
		stickyTop: 0,
		stickyBottom: 0,
		stickyClass: 'sticky',
		widthLimit: 575
	});
});

*, *:after, *:before{
	box-sizing: border-box;
}
body {
	font-family: 'Open Sans', serif;
	background-color: #fff;
	padding: 0px;    
	height: 1500px;
}
.header-nav{
	background-color: #ddd;
}
.header-logo{
	background-color: #ccc;
}
.header-logo a{
	display: block;
	text-align: center;
	font-size: 20px;
	line-height: 30px;
	padding: 20px 0;
	color: #1d1d1d;
	text-decoration: none;
}
.header-logo.sticky{
	background-color: #1d1d1d;
}
.header-logo.sticky a{
	color: #fff;
}
.header-navbar{
	padding-top: 18px;
	padding-bottom: 18px;
}
.header-navbar ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.header-navbar li{
	padding: 5px 20px;
}
.header-navbar li:last-child{
	padding-right: 0;
}
.header-navbar li a{
	color: #1d1d1d;
	text-decoration: none;
}
.more-pen{
	position: fixed;
	right: 20px;
	bottom: 20px;
	text-align: right;
	text-transform: capitalize;
}
.more-pen a{
	display: inline-block;
	padding: 5px 20px;
	background-color: #1d1d1d;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}
.more-pen a:hover{
	background-color: #8647db;
}
.more-pen a .fa{
	font-size: 14px;
	margin-left: 7px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container header-nav">
	<div class="row align-items-center justify-content-end">
		<div class="col-sm-2 header-logo"><a href="#">Logo</a></div>
		<div class="col-sm-10 header-navbar">
			<ul class="d-flex ml-auto justify-content-sm-end">
				<li>
					<a href="#">Home</a>
				</li>
				<li>
					<a href="#">Contact Us</a>
				</li>
			</ul>
		</div>
	</div>
</div>
<div class="more-pen">
	<a href="https://codepen.io/AsfanShaikh/pen/PrPgZb" target="_blank">For more Stickybar JS demo <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

位置：固定会破坏引导程序4中的网格

2 个答案: