Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.11.2018, 13:34
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 63

Фиксированное меню в шапке
Есть скрипт и меню
Не выполняется вот это условие

Должно работать так
Пользователь находится в верхней позиции сайта
Код:
<div id="navbar22">
Пользуется прокруткой
Код:
<div id="navbar22" class="sticky22">
Пользователь вернулся к верхней позиции сайта
Код:
<div id="navbar22">
Что я делаю не так?
В скрипте не выполняется вот это условие
else {
    navbar22.classList.remove("sticky22");


Сам скрипт
window.onscroll = function() {myFunction()};


var navbar = document.getElementById("navbar22");


var sticky_1 = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky_1) {
    navbar22.classList.add("sticky22")
  } else {
    navbar22.classList.remove("sticky22");
  }
}


Пункты меню и само оформление
<div id="navbar22">
.....
</div>


Вот такой CSS
Код:
<style>
#navbar22 {
  z-index:100!important;
}

/* Navbar links */

/* Page content */
.content22 {
  padding:16px;
}


.sticky22 {
  position: fixed;
  top: 0;
  width: 100%;
}


.sticky22 + .content22 {
  padding-top:60px;
}
</style>

Последний раз редактировалось oslayer, 05.11.2018 в 13:45.
Ответить с цитированием
  #2 (permalink)  
Старый 05.11.2018, 13:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

oslayer,
строка 4 зачем?
Ответить с цитированием
  #3 (permalink)  
Старый 05.11.2018, 13:46
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 63

отредактировал. все равно не работе я совсем в js деревянный
Ответить с цитированием
  #4 (permalink)  
Старый 05.11.2018, 13:47
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 63

в теории понимаю что нужно получить значение верхней позиции сайта
сравнить с текущей и если совпадают по прибить класс.. На практике не знаю как
Ответить с цитированием
  #5 (permalink)  
Старый 05.11.2018, 14:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

oslayer,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <style>
#navbar22 {
  z-index:100!important;
  background-color: #FF0000;
}

/* Navbar links */

/* Page content */
.content22 {
  padding:16px;
}


.sticky22 {
  position: fixed;
  top: 0;
  width: 100%;
}


.sticky22 + .content22 {
  padding-top:60px;
}
body{
    height: 1200px;
}

</style>

  <script>
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('scroll', myFunction);
var navbar = document.getElementById("navbar22");
var sticky_1 = navbar.offsetTop;
var w = navbar.scrollWidth;
function myFunction() {
  if (window.pageYOffset >= sticky_1) {
    navbar.classList.add("sticky22");
    navbar.style.width = w + "px";
  } else {
    navbar.classList.remove("sticky22");
    navbar.style.width = "";
  }
}

});
</script>
</head>

<body>

<div id="navbar22">


.....


</div>

</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 05.11.2018, 14:17
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 63

Не работает в мобильной версии Такой же результат как у моего скрипта
Ответить с цитированием
  #7 (permalink)  
Старый 05.11.2018, 14:20
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 63

мне нужна проверка вертикальной прокрутки... и соответственно условие выполнения если положение верхнее.. Только вопрос.как это сделать
var scrollTop = window.pageYOffset;
If  if (scrollTop == 0) {
navbar22.classList.remove("sticky22");
}

Вроде так.. но не работает..
Ответить с цитированием
  #8 (permalink)  
Старый 05.11.2018, 15:32
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 63

Ларчик просто открывался
function myFunction() {

  if (window.pageYOffset >= sticky_1)

меняем на
function myFunction() {

  if (window.pageYOffset > sticky_1)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фиксированное меню с скролом, без overlaw:auto. Jolly Элементы интерфейса 3 25.06.2017 22:42
Фиксированное всерху меню наезжает на блоки с якорными ссылками Ingener jQuery 2 12.08.2016 14:05
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36