滑回顶部

时间:2014-08-15 13:47:00

标签: javascript html css wordpress css3

我正在使用WP mystickymenu。您可以在此处看到它:http://wordpress.transformnews.com/plugins/mystickymenu-simple-sticky-fixed-on-top-menu-implementation-for-twentythirteen-menu-269

因此,当您向下滚动时,它会从顶部带有菜单并保持在那里直到您滚动回到顶部。我遇到的主要问题是,当你回到顶部并且我希望它以与显示相同的方式返回时,它会如此迅速地隐藏起来,我的意思是 slide

当它出现时,它会使用向下滑动效果,我希望它能够以滑动顶部效果返回,而不是快速隐藏。

这是JS:

    //disable at small screen sizes
var myfixed_disable_small = parseInt(mysticky_name.mysticky_disable_at_width_string);
var mybodyWidth = parseInt(document.body.clientWidth);

if (mybodyWidth >= myfixed_disable_small) {
// select mysticky class
var mysticky_navbar = document.querySelector(mysticky_name.mysticky_string);

// add mysticky_wrap div around selected mysticky class
var parentmysticky = mysticky_navbar.parentNode;
var wrappermysticky = document.createElement('div');
var position = 0;
for(var i = 0; i < parentmysticky.childNodes.length; i++) {
if(parentmysticky.childNodes[i] == mysticky_navbar) {
position = i;
break;
};
};
wrappermysticky.id = 'mysticky-wrap';
wrappermysticky.appendChild(mysticky_navbar);
parentmysticky.insertBefore(wrappermysticky, parentmysticky.childNodes[position]);

// add mysticky_nav div inside selected mysticky class
var parentnav = mysticky_navbar.parentNode;
var wrappernav = document.createElement('div');
wrappernav.id = 'mysticky-nav';
parentnav.replaceChild(wrappernav, mysticky_navbar);
wrappernav.appendChild(mysticky_navbar);

// add myfixed and wrapfixed class to divs while scroll
var mysticky_active_on_height = parseInt(mysticky_name.mysticky_active_on_height_string) ;
var origOffsetY = mysticky_active_on_height ;
var mydivHeight = ((mysticky_navbar.offsetHeight) + 'px');

var hasScrollY = 'scrollY' in window;
function onScroll(e) {
var mydivWidth = ((mysticky_navbar.offsetWidth) + 'px');
var mydivReset = '';

var y = hasScrollY ? window.scrollY : document.documentElement.scrollTop;
y >= origOffsetY  ? mysticky_navbar.classList.add('myfixed') : mysticky_navbar.classList.remove('myfixed');
y >= origOffsetY  ? wrappernav.classList.add('wrapfixed') : wrappernav.classList.remove('wrapfixed');
y >= origOffsetY  ? mysticky_navbar.style.width = mydivWidth : mysticky_navbar.style.width = mydivReset;
y >= origOffsetY  ? wrappermysticky.style.height = mydivHeight : wrappermysticky.style.height = mydivReset;
}

document.addEventListener('scroll', onScroll);
};

是否有人知道如何让它以同样的方式隐藏起来?

1 个答案:

答案 0 :(得分:0)

当菜单显示时,看起来有缓和效果。但是当你向上滚动时,它就会消失。你需要找到控制消失的效果。

在.js文件中查找控制“mysticky-nav”的效果,这是粘性菜单本身的ID。它降临时似乎是一种“有生命的”效应。你想要在它消失时编辑效果。

假设这是一个插件,请检查插件文件夹中的.js文件,因为它们可能不会显示在页面本身的源代码中。

希望这有帮助!