Блог

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

По сути, это мой вложенный блок рассылки:

 <div id="newsletter" class="m-newsletter_störer">
   <div class="m-newsletter_störer-container"> </div>
</div>
  

и css:

 .m-newsletter_störer {
    background:green;    
    max-width: 900px;
    margin: auto;
    position: sticky;
    bottom: 0;

amp;-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex;

    @include media('>phone') {
        padding: 3rem 1rem;
    }
}
  

мой статический вложенный блок:

 <div id="newsletter" class="m-newsletter">
   <div class="m-newsletter-container"> </div>
</div>
  

и css:

 .m-newsletter {
    background: $green;

amp;-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex;

    @include media('>phone') {
        padding: 3rem 1rem;
    }
}
  

Также я хочу, чтобы мой липкий вложенный блок появлялся через 10 секунд на странице.

Если вам нужно что-нибудь еще, чтобы помочь, напишите комментарий.

Я не силен в JavaScript, но я реализовал нечто подобное некоторое время назад.

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

 $(window).scroll(function() {
   $("#newsletter").removeClass("viewport-bottom");
   if($(window).scrollTop()   $(window).height() > ($(document).height() - 400) ) {
       //Bottom of the page
       $("#newsletter").addClass("viewport-bottom");
   }
});
  

Вы можете изменить 400 значение на высоту от нижней части страницы до добавления класса ‘viewport-bottom’.

Затем просто уменьшите непрозрачность с помощью css для этого класса.

почему бы не попробовать z-indexes поместить нижний zindex на липкий tr, а верхний — в нижний колонтитул