Как вставить div, когда прокручиваешь 50% предмета?

0

Это может быть простой вопрос, но, пожалуйста, помогите! Я реализовал липкий div используя следующий код, но мне нужно знать, как изменить положение, при котором div получает "застрял"?

Я хочу, чтобы мой div только застревал, когда 50% его прокручивалось. На данный момент он застревает, когда он достигает вершины, но я хотел бы, чтобы 50% его продолжали прокручиваться на полпути (грубо), прежде чем он застрял.

$(document).ready(function() {
    var s = $("#picture1");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        //$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
        if (windowpos >= pos.top) { s.addClass("stick"); $("body").css("margin-top", s.height()); } else { s.removeClass("stick"); $("body").css("margin-top", 0); }

    });
});

и CSS

.stick {
    position:fixed;
    top:0px;
    /*_top: expression( ie6 = (document.documentElement.scrollTop + "px") );*/
    z-index: 1000;
}
Теги:
sticky

2 ответа

0
Лучший ответ

change windowpos >= pos.top to windowpos >= (s.height()/2) + pos.top

РЕДАКТИРОВАТЬ

http://jsfiddle.net/BVK2q/

Поделиться
  • 0
    Спасибо за это, но когда он получает эту позицию, весь div исчезает!
  • 0
    я не уверен .. но попробуйте удалить второе выражение if else .. стиль 'margin-top' может мешать
Показать ещё 5 комментариев
0

ВИДЕТЬ ДЕМО

Div получает стиль .stick только тогда, когда ваш div увеличивается на 50%. Но когда вы применяете fixed позицию к некоторому div, он выходит из обычной компоновки, и вы теряете способность получать какой-либо запас по себе. Таким образом, в этом случае вы должны применить маржу или дополнение к телу, которое вы уже сделали.

В любом случае, я немного подстроил ваш код, чтобы показать, как вы можете получить то, что хотите.

$(document).ready(function() {
var s = $("#picture1"),
pos = s.position(),
sHeight = s.height();

$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= (sHeight/2) + pos.top) {
        s.addClass("stick");
        $('body').css('paddingTop', sHeight + 60);
    } else {
        s.removeClass("stick"); 
        $('body').css('paddingTop', '0');
    }
});
});
Поделиться
  • 0
    Спасибо тебе за это. Но как сделать так, чтобы он придерживался только 50-процентной ставки? Так что он не возвращается к 100% .stick, как в вашей демоверсии

Ещё вопросы

Сообщество Overcoder
Наверх
Меню