Nano Hash - криптовалюты, майнинг, программирование

Липкая строка меню, которая начинается снизу, а затем остается вверху

Я делаю этот одностраничный сайт, где при первом открытии весь экран заполняется большим изображением, а строка меню находится внизу экрана.

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

Я нашел много скриптов «липкого меню», которые делают что-то похожее, но они всегда начинаются со строки меню где-то в середине страницы, а не с меню, которое в начале выровнено по низу.

Вот скрипка:

http://codepen.io/anon/pen/pREYeJ

Я использовал в нем этот скрипт: http://stickyjs.com/

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

Я думаю, что проблема в том, что я использую

position: absolute;
bottom: 0;

в div строки меню.

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

Есть идеи?

javascript menu jquery css sticky
16.01.2017

Ответы:


1

Вы можете добавить значение top и transition в CSS:

#menu{
  /* trigger an animation when scripts updates CSS*/
  top:calc(100% - 100px);/* cause scripts gives top:0 and erase bottom */
  transition:1s;/* your transition */
  height: 100px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #009900; 
}

редактировать

В противном случае вы можете вдохновиться: https://www.sitepoint.com/css-position-sticky-introduction-polyfills/

для такого результата http://codepen.io/anon/pen/xgEeye

position:fixed вместо absolute и здесь скрипт обновлен:

//$(document).ready(function(){
//    $("#menu").sticky({topSpacing:0});
//  });

var menu =  document.querySelector('#menu');
var box =  document.querySelector('#screen2');
var boxPosition = box.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= boxPosition) {
        menu.style.top = '0px';
    } else {
        menu.style.top = 'calc(100% - 100px)';
    }
});


var menu =  document.querySelector('#menu');
var box =  document.querySelector('#screen2');
var boxPosition = box.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= boxPosition) {
        menu.style.top = '0px';
    } else {
        menu.style.top = 'calc(100% - 100px)';
    }
});
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
#screen1 {
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #000;
}
#menu {
  transition: 1s;
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  top: calc(100% - 100px);
  background-color: #009900;
  border-top: 2px solid #333;
  color: #fff;
  text-align: center;
  font-size: 20px;
}
#screen2 {
  width: 100%;
  background-color: #f4452a;
  height: 1000px;
  padding-top: 200px;
  text-align: center;
}
<div id="screen1">
  screen
</div>
<div id="menu">
  THIS IS THE MENU
  <br />and I don't want to abruptly jump to the top but to gently slide to it on scroll and then stick to it
</div>
<div id="screen2">
  Rest of the page bla bla
  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />keep scrolling
</div>

16.01.2017
  • Хммм. Это выглядит лучше, но это не то, что мне нужно, потому что оно перемещается наверх, как только вы начинаете прокручивать. Я бы хотел, чтобы он оставался на том же месте - между screen1 и screen2, а не перемещался вверх поверх screen1. Ну... если я не могу найти способ сделать это, я мог бы использовать вашу идею, все равно спасибо :) 16.01.2017
  • @TinaMalina Ну, это о вашем скрипте, CSS не имеет ничего общего с тем, когда срабатывает прокрутка сверху :(, Может быть, вы хотите добавить эту информацию в свой вопрос с уважением 16.01.2017
  • Возможно, мне понадобится другой скрипт (этот я не писал сам, я просто погуглил). Но я не знаю ни одной такой работы, я пробовал несколько... :/ 16.01.2017
  • @TinaMalina Вы можете вдохновиться на sitepoint.com/css-position-sticky- введение-полифиллы, выполняющие такие codepen.io/anon/pen/xgEeye 16.01.2017
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..