Плавающее меню, javascript на сайте

172
30 мая 2019, 17:20

Такая проблема, вот на этом сайте http://mnogobuketov.ru/test.html нужно сделать так, чтобы тень под меню, не накладывалась два раза (становиться контрастнее, когда листаешь вниз и обратно, две тени друг на друге) или найти альтернативу при всём сохраненном функционале. Для плавающего меню использовал этот код

(function(){ 
var a = document.querySelector('#aside1'), b = null, P = 0;   
window.addEventListener('scroll', Ascroll, false); 
document.body.addEventListener('scroll', Ascroll, false); 
function Ascroll() { 
  if (b == null) { 
    var Sa = getComputedStyle(a, ''), s = ''; 
    for (var i = 0; i < Sa.length; i++) { 
      if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0 || Sa[i].indexOf('height') == 0) { 
        s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; ' 
      } 
    } 
    b = document.createElement('div'); 
    b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;'; 
    a.insertBefore(b, a.firstChild); 
    var l = a.childNodes.length; 
    for (var i = 1; i < l; i++) { 
      b.appendChild(a.childNodes[1]); 
    } 
    a.style.height = b.getBoundingClientRect().height + 'px'; 
    a.style.padding = '0'; 
    a.style.border = '0'; 
  } 
  var Ra = a.getBoundingClientRect(), 
      R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#FooterContainer').getBoundingClientRect().top + 0);  
  if ((Ra.top - P) <= 0) { 
    if ((Ra.top - P) <= R) { 
      b.className = 'stop'; 
      b.style.top = - R +'px'; 
    } else { 
      b.className = 'sticky'; 
      b.style.top = P + 'px'; 
    } 
  } else { 
    b.className = ''; 
    b.style.top = ''; 
  } 
  window.addEventListener('resize', function() { 
    a.children[0].style.width = getComputedStyle(a, '').width 
  }, false); 
} 
})()

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

READ ALSO
React не получается найти данные в объекте [закрыт]

React не получается найти данные в объекте [закрыт]

Есть код который передает массив в другой компонент, далее мне просто нужно найти в нем свойство thumb

186
Отличия свойства от переменной

Отличия свойства от переменной

В чем отличие свойства объекта от переменной глобального объекта?

149
React нажатия на кнопку срабатывают сами

React нажатия на кнопку срабатывают сами

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

158
Сделать первый запрос к серверу с периодом обновления в 1 сек

Сделать первый запрос к серверу с периодом обновления в 1 сек

Есть маленькая проблемаУ меня вся страница обновляется с периодом в 5 сек и соответственно когда первый раз картинка грузится то появляется...

158