我想在向下滚动时修复<div>

Question

即使我向下滚动this page，我也想修复由红条改变的绿条。

然后，我按照这样编写HTML，当我向下滚动时，绿色条不会移动和消失。 这张照片上只附有香蕉和柠檬等文字。

我尝试编写了几个jQuery代码并更改了CSS，就像这样，

div#foo {
    position: fixed;
}

div#bar {
    position: fixed;
}

但是，它并没有像我想的那样移动。 栏是固定的，但不像Affix function of Bootstrap。 我知道，问题是我的CSS部分，特别是position。对不起，我不熟悉CSS。 你能给我一些建议吗？

＆＃13;

＆＃13;

		$(function(){

			/**
			 * affix.js
			 */
			$('.lemon').affix({
				offset: {
      				top: 100,
      				bottom: 100
    			}
  			});

  			/**
			 * Fixing Header
			 */
			/*$(window).on('load scroll', function() {
				if ($(window).scrollTop() > 50) {
					$('.lemon').css('position', 'fixed');
				} else {
					$('.lemon').css('position', 'absolute');
				}
			});*/

			/**
			 * slideUp
			 */
			// setTimeout(function() {
			// 	$("div#foo").animate(
			// 		{height: "toggle", opacity: "toggle"}, "slow", function() {
			// 			$("div#bar").show();
			// 	});
			// }, 2000);
		
			setTimeout(function(){
				$('div#foo').addClass('magictime slideUp');
			}, 5000);


			/**
			 * the quantity of scroll
			 */
			$(window).scroll(function () {
    			var ScrTop = $(document).scrollTop();
    			$('#intervalValue').val(ScrTop);
			});

		});

＆＃13;

		body {
			margin: 0;
			padding: 0;
		}

		fixed {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 10;
		}

		div#foo {
			height: 100px;
			width: 100%;
			background-color: red;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9999;
		}

		div#bar {
			height: 100px;
			width: 100%;
			background-color: green;
			/* display: none; */
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9998;
		}

		.magictime {
			animation-duration: 1s;
			animation-fill-mode: both;
		}

		.slideUp {
			animation-name: slideUp;
		}

		@keyframes slideUp {
			0% {
				transform-origin: 0 0;
				transform: translateY(0%);
			}
			100% {
				transform-origin: 0 0;
				transform: translateY(-100%);
			}
		}

		h1 {
			text-align: center;
			vertical-align: center;
		}

		div#interval {
   			position: fixed;
    		top: 0;
    		right: 0;
    		z-index: 9999;
  		}

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="" class="lemon">  <!-- Or data-spy="affix" data-offset-top="100" --> 
		<div id="foo" class="">Apple Orange</div>
		<div id="bar" class="">Banana Lemon</div>
	</div>
	<div id="listlist" class="">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你有这个div：

<div id="" class="lemon">

给它一个ID，并在向下滚动时尝试用jQuery给它一个CSS样式。

示例HTML：

<div id="menu" class="lemon">

示例jQuery：

$("#menu").css("position", "fixed");
$("#menu").css("width", "100%");

Answer 2

你要做的唯一事情是改变位置：absolut to fixt for #bar如下：

    div#bar {
        height: 100px;
        width: 100%;
        background-color: green;
        /* display: none; */
        position: fixed;  <--- here is the change
        top: 0;
        left: 0;
        z-index: 9998;
    }