Как разместить элемент div только после прокрутки по горизонтали?

Question

Я ищу способ разместить элемент #header моей страницы как «фиксированный» только после прокрутки примерно на 100% вправо.

< Если оставить 100% Тогда

#header { display:none; } 

Если Left> 100% Тогда

#header { position:fixed, top:0, left:0, width:50px, height:50px, color:red, z-index:9999; } 

Я попытался это:

<script type='text/javascript'> 
var header = $("#header"); 
$(document).scroll(function() { 
    if($(this).scrollLeft() > 1920) { 
     header.css({"position" : "fixed", "top" : "0", "left" : "0", "width" : "50px", "height" : "50px", "background" : "red", "z-index" : "9999"}); 
    } else { 
     header.css({"display" : "none"}); 
} 
}); 
</script> 

Но это не работает. И можно ли сделать условие с процентом вместо количества пикселей? (100% вместо 1920)

Не могли бы вы помочь мне, пожалуйста?

Answer 1

Попробуйте заменить 1920 на "window.innerWidth". Это переменная JS DOM для ширины окна браузера.