jquery - controlling the showing and hiding of the website logo

admin管理员组

文章数量:1427780

I'm using the following css to hide the logo at the top left area on my website:

.home .logo-for-panel {
  display:none;
}

---

However I hope the logo will appear gradually when I scroll down to 2nd section and keeps showing till to bottom. Reversely, while I scroll up to the top section, I hope the logo will disappear gradually again. How could I do this effect as the sample website below:

/

thanks a lot

I'm using the following css to hide the logo at the top left area on my website:

.home .logo-for-panel {
  display:none;
}

---

However I hope the logo will appear gradually when I scroll down to 2nd section and keeps showing till to bottom. Reversely, while I scroll up to the top section, I hope the logo will disappear gradually again. How could I do this effect as the sample website below:

http://artspace.hk/

thanks a lot

• jquery
• css
• logo

Share Improve this question edited May 10, 2019 at 11:18 Vishwa 37622 silver badges1717 bronze badges asked May 10, 2019 at 5:11 Tam WingTam Wing 1 1

• 1 Hi 'logo-for-panel' class not in the web site code check it – SNS Commented May 10, 2019 at 5:23

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I don't have time to write this out for you buddy but it seems like you would have:

• A hero section with your logo floating inside.

• A position: fixed; menu style, where you put your menu, search... You will hide this by default.

From here you are able to use a nifty 'check if in view' jQuery function. Where you would check if your hero section is in view. TRUE - .hide() menu section. FALSE - .show() menu section.

Then place the 'check if in view' function inside an 'on scroll' function to refresh when the user moves up and down.

Here is a helpful document (This has been taken from another genius, I simply <3 and adapted the code slightly for my preferences):

(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);

本文标签： jquerycontrolling the showing and hiding of the website logo