jquery - 我想在向下滚动期间修复

Question

我想修复被红色条更改的绿色条，即使我向下滚动也是如此 this page .

然后，我像下面这样编写 HTML，当我向下滚动时，绿色条不会移动并消失。这张照片只贴了香蕉和柠檬的文字。

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

div#foo {
    position: fixed;
}

div#bar {
    position: fixed;
}

但是，它并没有按照我的意愿移动。酒吧是固定的，但不像Affix function of Bootstrap .我知道，问题出在我的 CSS 部分，尤其是 position。对不起，我不熟悉 CSS。你能给我一些建议吗？

		$(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);
			});

		});

		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;
  		}

    <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>

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%");