Исправлен заголовок, когда происходит избыточное вертикальное переполнение

Question

Это может быть, к сожалению, широкий вопрос. Но я не смог найти ключевые слова .. Поэтому я надеюсь, что это поможет тем, кто пытается добиться того, о чем я расскажу.

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

http://riotindustries.com/ проверить эту ссылку. пройдите вниз и посмотрите заголовок.

Я думаю, что вы уже видели вещь, что я говорю сейчас ..

Как я могу это сделать?

спасибо.

Answer 1

Если вы знаете, как использовать инструменты для разработчиков, то вы можете увидеть внутри http://riotindustries.com/header что ДИВ присваивается fixedtop класса как только пользователю прокручивать вниз 350px сверху.

Вы можете добиться этого с помощью jQuery и я быстро создал образец jsFiddle для вас, чтобы проверить, хотя вам нужно будет дополнительно изменить стили в соответствии с вашими потребностями, так как это довольно просто. Что происходит в моем jsFiddle, так это то, что когда вы прокручиваете 250px, header присваивается класс fixedtop.

HTML:

<header>This is a nice header, bro!</header> 
<div id="longcontent"></div> 

CSS:

header { 
    position: fixed; 
    background: gray; 
    color: black; 
    width: 500px; 
    text-align: center; 
    padding: 50px; 
    left: 50%; 
    transform: translate(-50%, 0); 
    top: 30px; 
} 

.fixedtop { 
    width: 100%; 
    background: black; 
    color: white; 
    padding: 50px 0px; 
    text-align: center; 
    box-shadow: 1px 1px 1px red; 
    top: 0px; 
} 

#longcontent { 
    height: 1000px; 
} 

JQuery:

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 

    if (scroll >= 250) { 
     $("header").addClass("fixedtop"); 
    } else { 
     $("header").removeClass("fixedtop"); 
    } 
}); 

---

$(window).scroll(function() {  
 
    var scroll = $(window).scrollTop(); 
 

 
    if (scroll >= 250) { 
 
     $("header").addClass("fixedtop"); 
 
    } else { 
 
     $("header").removeClass("fixedtop"); 
 
    } 
 
});

header { 
 
    position: fixed; 
 
    background: gray; 
 
    color: black; 
 
    width: 500px; 
 
    text-align: center; 
 
    padding: 50px; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    top: 30px; 
 
} 
 

 
.fixedtop { 
 
    width: 100%; 
 
    background: black; 
 
    color: white; 
 
    padding: 50px 0px; 
 
    text-align: center; 
 
    box-shadow: 1px 1px 1px red; 
 
    top: 0px; 
 
} 
 

 
#longcontent { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header>This is a nice header, bro!</header> 
 
<div id="longcontent"></div>