я пытаюсь скрыть все элементы, используя jquery, когда страница загружена/готова рядом с теми, которые находятся в видимом окне просмотра (экране).
затем, когда пользователь начнет прокручивать вниз, и элемент находится в видимом окне просмотра (экран пользователя). элементы появятся с эффектом затухания.
поэтому я пытаюсь использовать некоторые комбинации кода, но ни один из них не работает на 100%. нужна помощь, чтобы получить эту работу без ошибок.
вот первый код, который я нашел в Интернете. это похоже на работу на главной странице (на первой странице), но когда я перехожу на страницу iner, она не работает. и этот код делает некоторые ошибки (медленный сайт).
второй код работает на конкретных элементах. если я изменю все конкретные элементы и поставлю только "тело", это создаст беспорядок на веб-сайте.
Вторая проблема - прокрутка. если какой-либо div или раздел имеют длинный контент, он изменит непрозрачность до 1 в конце этого div, но это неправильно! ему нужно изменить непрозрачность, когда верхняя часть div видна в окне просмотра (экран пользователя).
вот первый код
$(document).ready(function() {
/* Hide all elements outside the visible window */
$('body *').each( function(){
var top_of_object = $(this).position().top;
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window < top_of_object ){
$(this).addClass('hideme').css({'opacity':'0'});
}
});
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of the desired elements */
$('.hideme').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > ( bottom_of_object + 20 ) ){
$(this).removeClass('hideme').animate({'opacity':'1'},500);
}
});
});
});
это второй код:
$(document).ready(function(){
tiles = $("#sidebar1 .widget , article section").fadeTo(0, 0);
});
$(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(500,1);
});
});
Даже когда вы устанавливаете непрозрачность в ноль, объект по-прежнему занимает пробел. Если вы установите $(this).addClass('hideme').css({'display':'none'});
то объект не будет отображаться браузером и не повлияет на расположение вашей страницы. На этой странице будет выглядеть так же, как это было бы, если элемент this
никогда не был создан.
Вы можете расширить sizzle, чтобы использовать собственное выражение:
jQuery.extend(jQuery.expr[':'], {
inview: function (el) {
var $e = $(el),
$w = $(window),
top = $e.offset().top,
height = $e.outerHeight(true),
windowTop = $w.scrollTop(),
windowScroll = windowTop - height,
windowHeight = windowTop + height + $w.height();
return (top > windowScroll && top < windowHeight);
}
});
Затем вы можете использовать его как:
$(window).scroll(function(){
$('.hideme:inview').animate({opacity:1},500,function(){$(this).removeClass('hideme');});
});
PS: я не тестировал фрагмент...