Javascript-форум - Заменить class в div при скролле страницы

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Заменить class в div при скролле страницы (https://javascript.ru/forum/misc/50771-zamenit-class-v-div-pri-skrolle-stranicy.html)

Заменить class в div при скролле страницы

Всем привет
Нужен небольшой скрипт, при скроле страницы к примеру на 1800px вниз он меняет класс у блока, а при скролле ниже 3000px меняет класс обратно.

Есть вот такой скрипт:

<script type="text/javascript">
$(document).ready(function(){

        var $readmore_block = $("#readmore_block");

        $(window).scroll(function(){
            if ( $(this).scrollTop() > 1800 && $readmore_block.hasClass("stocke2") ){
                $readmore_block.fadeOut('fast',function(){
                    $(this).removeClass("stocke2")
                           .addClass("fixed_bottom")
                           .fadeIn('fast');
                });
            } else if($(this).scrollTop() <= 1800 && $readmore_block.hasClass("fixed_bottom")) {
                $readmore_block.fadeOut('fast',function(){
                    $(this).removeClass("fixed_bottom")
                           .addClass("stocke2")
                           .fadeIn('fast');
                });
            }
        });//scroll
    });//jQuery
</script>

После 1800px работает все как надо, но нужно что бы после 3000 он менял класс обратно, чего в нем не хватает?

<html>
<body>
<div style="height: 5000px; width: 10px;"></div>
<div style="position: fixed; left: 50px; top: 50px; height: 50px; width: 50px; background-color: red;"></div>
</body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var div = $('div:last');
$(window).scroll(function(){
	var top = $(this).scrollTop();
	console.log(top);
	if (top > 1800 && top < 3000) {
		div.css('background-color', 'green');
	} else {
		div.css('background-color', 'red');
	}
});
</script>
</html>

можно так:

var div = $('div:last');
$(window).scroll(function(){
	var top = $(this).scrollTop();
	console.log(top);
	
	div.css('background-color', (top > 1800 && top < 3000) ? 'green': 'red');
})

Цитата:

Сообщение от skrudjmakdak (Сообщение 334659)

<html>
<body>
<div style="height: 5000px; width: 10px;"></div>
<div style="position: fixed; left: 50px; top: 50px; height: 50px; width: 50px; background-color: red;"></div>
</body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var div = $('div:last');
$(window).scroll(function(){
	var top = $(this).scrollTop();
	console.log(top);
	if (top > 1800 && top < 3000) {
		div.css('background-color', 'green');
	} else {
		div.css('background-color', 'red');
	}
});
</script>
</html>

можно так:

var div = $('div:last');
$(window).scroll(function(){
	var top = $(this).scrollTop();
	console.log(top);
	
	div.css('background-color', (top > 1800 && top < 3000) ? 'green': 'red');
})

Ну это Вы цвет меняете, а как менять класс блока? Типа как в моем скрипте...

вам сложно поменять мой код на свой?

var div = $('div:last');
$(window).scroll(function(){
	var top = $(this).scrollTop();
	console.log(top);
	
	if (top > 1800 && top < 3000) {
		div.fadeOut('fast',function(){
			$(this).removeClass("stocke2")
			   .addClass("fixed_bottom")
			   .fadeIn('fast');
		});

	} else {
		div.fadeOut('fast',function(){
			$(this).removeClass("fixed_bottom")
			   .addClass("stocke2")
			   .fadeIn('fast');
		});

	}
});