Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Фиксированное меню в шапке (https://javascript.ru/forum/dom-window/75772-fiksirovannoe-menyu-v-shapke.html)

oslayer 05.11.2018 13:34

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

Должно работать так
Пользователь находится в верхней позиции сайта
Код:

<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>


рони 05.11.2018 13:40

oslayer,
строка 4 зачем?

oslayer 05.11.2018 13:46

отредактировал. все равно не работе :( я совсем в js деревянный

oslayer 05.11.2018 13:47

в теории понимаю что нужно получить значение верхней позиции сайта
сравнить с текущей и если совпадают по прибить класс.. На практике не знаю как

рони 05.11.2018 14:02

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>

oslayer 05.11.2018 14:17

Не работает в мобильной версии :( Такой же результат как у моего скрипта

oslayer 05.11.2018 14:20

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

Вроде так.. но не работает..:(

oslayer 05.11.2018 15:32

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

  if (window.pageYOffset >= sticky_1)

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

  if (window.pageYOffset > sticky_1)


Часовой пояс GMT +3, время: 11:26.