Как правильно сделать плавающий блок при скроллинге?
На этом сайте есть плавающий хэадер.
Нужно что бы при скроллинге в плавающий хеадер слева дабавлялся логотип.
Я добавил логотип в HTML блок плавающего хеадера, задал display: none; и далее использую такой скрипт:
$(document).ready(function(){ $(window).scroll(function(){ if($(window).scrollTop()>200){ $('.header-bottom .site-branding a img').show() }else{ $('.header-bottom .site-branding a img').hide() } }); }); |
$(document).ready(function(){ $(window).scroll(function(){ if($(window).scrollTop()>200){ $('.header-bottom .site-branding a img').show() }else{ $('.header-bottom .site-branding a img').hide() } }); });
Проблема в том, что логотип в плаващем хэадере при скроллинге страницы, появляется и исчезает раньше чем нужно - появляется слишком рано, и исчезает слишком рано. Особенно это заметно при обратном скроллинге, т.е когда логотип должен исчезнуть.
Как это можно исправить? Как нужно доработать скрипт? Потому что ни как не получается подобрать оптимальное значения для scrollTop()>
Дополнительно:
Ответы:
измени 200 на нужное тебе значение, и я лучше бы добавлял класс active
.site-branding { opacity: 0; transition: .5s; } .site-branding.active { opacity: 1; } .site-branding a{ height: 0; overflow: hidden; } .site-branding.active a { height: auto; } |
.site-branding { opacity: 0; transition: .5s; } .site-branding.active { opacity: 1; } .site-branding a{ height: 0; overflow: hidden; } .site-branding.active a { height: auto; }
тогда появление будет плавным и верстка прыгать не будет
- Проблемма в том что не удается за место 200 подобрать нужное значение.
При проктуртке вниз все в порядке. А при прокрутке вверх лого изсчезает слишком рано - какое время плавающий хэдер прокруичвается без логотипа.Попробовал ваш CSS код. Если его использовать то логотип вообще не повляется при прокрутке.
- maxon76, Логотип не появляется потому что вы не добавляете класс active, также проблема в том что после того как меню прилипает к верху оно исчезает у вас из тела разметки страницы(надеюсь понятно объяснил) пропадает высота меню, у вас идет прыжок и баннер оказывается под меню, это проблемы верстки скрип отрабатывает нормально, но вообще это все можно сделать на css Пример ютуб
- Оказывается при прокрутке к липкому хэадеру добовлялся класс .minimized.
Я решил проблемму так, на CSS, без JS.header:not(.minimized) .header-bottom .logo { display:none}
header:not(.minimized) .header-bottom .logo { display:none}
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания плавающего блока при скроллинге страницы можно использовать CSS и JavaScript. Вот пример решения данной задачи:
1. HTML:
```html
```
2. CSS:
```css
.floating-block {
position: fixed;
top: 50px; /* Расстояние от верхнего края страницы */
right: 0;
width: 200px;
background-color: #f2f2f2;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
```
3. JavaScript:
```javascript
window.onscroll = function() {myFunction()};
var floatingBlock = document.querySelector('.floating-block');
var sticky = floatingBlock.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
floatingBlock.style.top = '10px'; /* Расстояние от верхнего края страницы при скролле */
} else {
floatingBlock.style.top = '50px'; /* Расстояние от верхнего края страницы */
}
}
```
Этот код сначала задает CSS стили для плавающего блока, который будет закреплен справа от экрана. Затем при помощи JavaScript определяется, когда пользователь прокрутил страницу достаточно, чтобы плавающий блок начал "плавать". В данном случае, при достижении определенного расстояния от верхнего края страницы, блок сдвигается вверх.
Таким образом, с помощью данного кода можно создать плавающий блок при скроллинге страницы.