Как изменить положение элемента с фиксированного на относительное, когда он достигает своего исходного положения в Dom

#jquery #html #css

#jquery #HTML #css

Вопрос:

Я работаю над веб-сайтом, где я хочу изменить положение элемента с фиксированного на относительное, когда он достигнет своего первоначального положения.

Вы можете проверить веб-страницу здесь -> http://www.countertack.com/homepage-2014?hs_preview=NPDotwST-1103539158

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

Я не силен в jquery или javascript, поэтому буду признателен за любую помощь. Спасибо

 .fixed-cta{
    background:#d32823;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999999;
}

Ответ №1:

Вот простое решение с использованием jQuery:

 $(window).scroll(function() {
    $('.fixed-cta').toggleClass('relative', $(window).scrollTop()   $(window).height() > $(document).height() - $('.your-black-footer').height());
});

Все, что вам нужно сделать, это заменить your-black-footer на имя класса вашего нижнего колонтитула и использовать следующий CSS:

 .relative {
    position: relative;
    bottom: auto;
}

Ответ №2:

обновленная рабочая скрипка fiddle Использует следующий код :

 $(window).scroll(function() {
   if($(window).scrollTop()   $(window).height() == $(document).height()) {
       $(".fixed-cta").css({position: "relative"});
   }else{
       $(".fixed-cta").css({position: "fixed"});
   }

});

Если достигнуто до дна, сделайте положение относительным.

1. Спасибо за твою помощь, брат, но мне нужно вернуться к фиксированному положению при прокрутке вверх, вы можете снова проверить веб-страницу после реализации вашего кода. Вы можете увидеть точное положение fixed-cta

2. вы имеете в виду, что если я снова прокручу вверх, положение будет исправлено?

3. @VikasGhodke Даже если у вас нет опыта работы с Jquery, вы должны быть в состоянии вывести то, что вы спрашиваете, из этого ответа.

4. Если ответ решил ваш вопрос, пожалуйста, вы можете принять его как правильный ответ. 🙂

Ответ №3:

Следующий код сработал для меня

 $(window).on("scroll", function () {
    if (
        $(window).scrollTop() >=
        $(".div").offset().top  
        $(".div").outerHeight() - window.innerHeight
    ) {
        console.log("condition matched");
        $(".fixed-cta").css({ position: "absolute" });
    } 
    else $(".fixed-cta").css({ position: "fixed" });
});