在特定区域div上切换类

时间:2019-06-14 15:38:30

标签: jquery css

滚动到顶部时,将blue类添加到#div,但是当它返回底部时,blue类不会被删除。

  

小提琴链接:http://jsfiddle.net/5d922roc

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  var os = $('#div1').offset().top;
  var ht = $('#div1').height();
  if(scroll > os + ht){
    $('#div2').addClass('blue');
  }
});
body, html {
	height: 101%;
	margin: 0;
}

.div {
	margin: 20px;
	padding: 5px;
	height: 500px;
	border: solid 1px black;
	background-color: #ffffff;
}

.div.blue { 
  background-color: #15158F;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" class="div">
  Div 1
</div>

<div id="div2" class="div">
  Div 2
</div>

<div id="div3" class="div">
  Div 3
</div>

1 个答案:

答案 0 :(得分:0)

继续TaplarHassan's条评论;您的server { listen 80; server_name example.com www.example.com; client_max_body_size 30M; location / { proxy_pass http://10.3.0.5:80; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location ^~ /api { proxy_pass http://10.3.0.5:80/$request_uri; proxy_set_header Host api.example.com; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location ~ ^/help/(.*)$ { root /usr/local/sbin/help; index index.html; try_files $uri $uri/ /index.html; } listen 443 ssl; ssl_certificate /etc/letsencrypt/live/example.ir/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/example.ir/privkey.pem; include /etc/letsencrypt/options-ssl-nginx.conf; ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; } 语句需要一个if语句才能完成以下命令:“如果滚动到顶部,请在else上添加blue。如果不在页面顶部,请删除{{1 }}”。

更新/修改的JS:

div2