Форум

oslayer · #1 (**permalink**) 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>

рони · #2 (**permalink**) 05.11.2018, 13:40

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

oslayer · #3 (**permalink**) 05.11.2018, 13:46

отредактировал. все равно не работе

я совсем в js деревянный

oslayer · #4 (**permalink**) 05.11.2018, 13:47

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

рони · #5 (**permalink**) 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 · #6 (**permalink**) 05.11.2018, 14:17

Не работает в мобильной версии

Такой же результат как у моего скрипта

oslayer · #7 (**permalink**) 05.11.2018, 14:20

мне нужна проверка вертикальной прокрутки... и соответственно условие выполнения если положение верхнее.. Только вопрос.как это сделать

var scrollTop = window.pageYOffset;
If  if (scrollTop == 0) {
navbar22.classList.remove("sticky22");
}

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

oslayer · #8 (**permalink**) 05.11.2018, 15:32

Ларчик просто открывался

function myFunction() {

  if (window.pageYOffset >= sticky_1)

меняем на

function myFunction() {

  if (window.pageYOffset > sticky_1)

Форум

Справочник

Discord чат

Курсы javascript