控制网站徽标的显示和隐藏

时间:2019-05-10 作者:Tam Wing

我正在使用以下css将徽标隐藏在我网站的左上角区域:

.home .logo-for-panel {
  display:none;
}
然而,我希望当我向下滚动到第二部分并一直显示到底部时,徽标会逐渐出现。相反,当我向上滚动到顶部时,我希望徽标会再次逐渐消失。作为以下示例网站,我如何实现此效果:

http://artspace.hk/

非常感谢

1 个回复
SO网友:Jason Is My Name

我没有时间给你写这个,伙计,但看起来你应该:

英雄区,内有你的标志。

位置:固定;菜单样式,您将菜单放在哪里,搜索。。。默认情况下,您将隐藏此内容。

在这里,您可以使用漂亮的“检查视图中是否存在”jQuery功能。在那里你可以检查你的英雄部分是否在视野之内。正确-。隐藏()菜单部分。错误-。show()菜单部分。

然后将“检查是否在视图中”功能置于“滚动”功能中,以便在用户上下移动时刷新。

下面是一个有用的文档(这是从另一个genius那里获得的,我只是<;3并根据自己的喜好对代码进行了一些修改):

(function($) {

    //CHECK SCROLLED INTO VIEW UTIL
    function Utils() {

    }

    Utils.prototype = {
        constructor: Utils,
        isElementInView: function (element, fullyInView) {
            var pageTop = $(window).scrollTop();
            var pageBottom = pageTop + $(window).height();
            var elementTop = $(element).offset().top;
            var elementBottom = elementTop + $(element).height();

            if (fullyInView === true) {
                return ((pageTop < elementTop) && (pageBottom > elementBottom));
            } else {
                return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
            }
        }
    };

    var Utils = new Utils();
    //END CHECK SCROLLED INTO VIEW UTIL

    //USING THE ELEMENT IN VIEW UTIL
    //this function tells what to do do when the element is or isnt in view.
    //var inView = Utils.isElementInView(el, false); Where FALSE means the element doesnt need to be completely in view / TRUE would mean the element needs to be completely in view
    function IsEInView(el) {

        var inView = Utils.isElementInView(el, false);

        if(inView) {

            //console.log(\'in view\');

        } else {
            //console.log(\'not in view\');
        }

    };

    //Check to make sure the element you want to be sure is visible is present on the page
    var variableOfYourElement = $(\'#variableOfYourElement\');

    //if it is on this page run the function that checks to see if it is partially or fully in view
    if( variableOfYourElement.length ) {

        //run function on page load
        IsEInView(variableOfYourElement);

        //run function if the element scrolls into view
        $(window).scroll(function(){

            IsEInView(variableOfYourElement);

        });

    }
    //END USING THE ELEMENT IN VIEW UTIL

})(jQuery);

相关推荐

Change image using only CSS

我用的是215主题。我有一个标志设置使用可湿性粉剂定制。我想在mobile或tablet view上更改图像。断点小于59.6875em。我正在使用以下代码:@media only screen and (max-width: 59.6875em) { .custom-logo { content: url(\"https://www.example.com/example/wp-content/uploads/Logo_Wide_2x.png\");