исправлена ​​боковая панель при прокрутке с Js - PullRequest
Новая
       12

исправлена ​​боковая панель при прокрутке с Js

0 голосов
/ 08 апреля 2020

Я потратил часы, пытаясь понять, почему я не могу исправить боковую панель при прокрутке с помощью JavaScript. На данный момент я не знаю, что-то в js или css. Я попытался добавить classList из «fixed» - не сработало .. и когда я добавляю sticky, он просто выталкивает основной текст. Идея состоит в том, чтобы навигационная панель и боковая панель были исправлены после того, как пользователь прокрутил весь заголовок, но основной текст должен быть прокручен, в то время как два других элемента зафиксированы. 

code here -> https://codepen.io/mullerz/pen/GRpKQVy```
help please and thanks a million

Ответы [ 2 ]

0 голосов
/ 08 апреля 2020

https://codepen.io/casa90/pen/ZEbzxZB

как css попробуйте ниже. Я использовал важный, потому что ваш #sidebar css под ним. Порядка css isportant. 

.fixed-sidebar{
        position:fixed !important;
    }

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

const nav = document.querySelector("#main");
const navTop = nav.offsetTop;
const navHeight = nav.offsetHeight;
const main = document.querySelector(".site-wrap");
const bars = document.querySelector("#bars");
const sidebar = document.getElementById("sidebar");
window.addEventListener("scroll", fixNav )  
function fixNav(){
    sidebar.style.top = (nav.offsetTop+navHeight) + "px";
    if(window.scrollY >= navTop){               
            nav.classList.add("fixed");
            main.style.paddingTop = navHeight + "px";
            sidebar.classList.add("fixed-sidebar");

    }else{
            main.style.paddingTop = 0;
              nav.classList.remove("fixed");
            sidebar.classList.remove("fixed-sidebar");
    }
}

bars.addEventListener("click", function(){  
    sidebar.classList.toggle("active");
})
0 голосов
/ 08 апреля 2020

CSS position: sticky - единственное, что вам нужно. Вы уже используете его где-то на навигационной панели, но из-за кода JavaScript все портится. Закомментируйте вашу функцию fixNav и прокрутите прослушиватель событий.

Вместо этого используйте CSS, чтобы сказать, когда элементы nav и #sidebar должны быть липкими. Элемент боковой панели должен иметь небольшое смещение, потому что он должен находиться чуть ниже панели навигации. С помощью свойства top вы можете установить положение триггера, когда элемент становится липким. То же самое касается left, right и bottom.

Добавьте следующие строки в существующие стили nav и #sidebar и посмотрите, что произойдет. 

nav {
  position: sticky;
  top: 0;
}

#sidebar{
  position:sticky;
  top: 8vh; /* <-- height of the nav */
}
...