When scrolling, use the .scrollTop() function which includes a conditional statement that

Question

When scrolling, use the .scrollTop() function which includes a conditional statement that

As a newcomer to jQuery, I've been making progress but have hit a roadblock with this code:

$(window).scroll(function(){
    var $header = $('#header');
    var $st = $(this).scrollTop();
    console.log($st);

    if ($st < 250) {
        console.log($st);
        $header.height(300 - $st);
    } else {
        $header.hover(function(){
            $(this).height(300);
        }, function (){
            $(this).height(50);
        });
    }
}).scroll();

http://jsfiddle.net/J4rsj/

Although everything seems to be functioning correctly, with the 'header' scaling down on scroll and expanding and contracting on hover, I have encountered a bug. After scrolling down and returning to the top of the page, the header shrinks to .height(50) on hover, even though it is supposed to only happen when scrollTop() is greater than 250.

I have checked the value of scrollTop() to ensure accumulation is not an issue, and have tried various approaches without success. My goal is to eventually smooth out the hover effects with animations, but that's a task for another time.

Any assistance or advice would be greatly appreciated!

javascript jquery html css hover

Answer 1

Answer №1

If you're encountering an issue where the hover event listener remains active on the $header element even after scrolling back up, there are a couple of solutions available. One approach is to incorporate checks for scrollTop() in the hover methods to ensure they only trigger when necessary. Another option is to remove the hover listener altogether when scrolling back up.

Answer 2

If you're encountering an issue where the hover event listener remains active on the $header element even after scrolling back up, there are a couple of solutions available. One approach is to incorporate checks for scrollTop() in the hover methods to ensure they only trigger when necessary. Another option is to remove the hover listener altogether when scrolling back up.

Answer 3

Answer №2

Give this a shot:

See it in action

$(window).scroll(function () {
    var $header = $('#header');
    var $st = $(this).scrollTop();
    if ($st < 250) {
        $header.height(300 - $st);
        $header.off(); // remove all events from #header
    } else {
        $header.on({
            mouseenter: function () {
                $(this).height(300);
            },
            mouseleave: function () {
                $(this).height(50);
            }
        });
    }
});

Check out the .on() documentation and .off() documentation for more information.

If you need to remove specific events, you can use .off() like this: $header.off('mouseleave');.

Answer 4

Give this a shot:

See it in action

$(window).scroll(function () {
    var $header = $('#header');
    var $st = $(this).scrollTop();
    if ($st < 250) {
        $header.height(300 - $st);
        $header.off(); // remove all events from #header
    } else {
        $header.on({
            mouseenter: function () {
                $(this).height(300);
            },
            mouseleave: function () {
                $(this).height(50);
            }
        });
    }
});

Check out the .on() documentation and .off() documentation for more information.

If you need to remove specific events, you can use .off() like this: $header.off('mouseleave');.

Answer 5

Answer №3

Together, you have both guided me in finding a solution to my initial question. Throughout the process, there were changes in the parameters which led to this final outcome.

$(window).scroll(function(){

    var $header = $('#header');
    var $st = $(this).scrollTop();
    var $headerS = 300 - $st;

    $header.height($headerS);

    $header.hover(function(){

        $(this).stop().animate({height:300}, 300);

        }, function (){

        $(this).stop().animate({height:$headerS}, 600);

    });

}).scroll();

In addition, I have specified a min-height of 50px for the #header element in the CSS file. This adjustment appears to be functioning correctly and offers an added advantage:

When $st is less than 250px, hovering over still expands the box to its full height before reducing back to align with the top of the article. Please refer to the demonstration here:

http://jsfiddle.net/rufusdenne/J4rsj/3/

Answer 6

Together, you have both guided me in finding a solution to my initial question. Throughout the process, there were changes in the parameters which led to this final outcome.

$(window).scroll(function(){

    var $header = $('#header');
    var $st = $(this).scrollTop();
    var $headerS = 300 - $st;

    $header.height($headerS);

    $header.hover(function(){

        $(this).stop().animate({height:300}, 300);

        }, function (){

        $(this).stop().animate({height:$headerS}, 600);

    });

}).scroll();

In addition, I have specified a min-height of 50px for the #header element in the CSS file. This adjustment appears to be functioning correctly and offers an added advantage:

When $st is less than 250px, hovering over still expands the box to its full height before reducing back to align with the top of the article. Please refer to the demonstration here:

http://jsfiddle.net/rufusdenne/J4rsj/3/

When scrolling, use the .scrollTop() function which includes a conditional statement that

Answer №1

Answer №2

Answer №3

Similar questions

What are the steps to modify the placeholder of the formik <Field/> component?

The functionality of -moz-background-clip:text is not functioning properly on Firefox browsers

Issues with Implementing Scroll Directive in Angular JS

Correct the string based on a character error

Can the load() function retrieve an element along with its descendants?

Establishing a primary data format for a backbone collection

Dynamic header that adjusts to fit window size fluctuations

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Is there a way to modify the browser's user agent using JavaScript or HTML?

Update the contents of a div element with JavaScript and PHP combo

Nodemon isn't functioning properly: nodemon isn't loading as expected

Guide on removing query parameters post a redirect using NextJS

Out of reach: Menu div slides up on click outside

Seamless flow from one image to the next

Sharing data between pages in Ionic and Angular with POST requests

Tips for defining CSS styles for the background color of <td> elements within a sitemap

What is the best way to display or conceal buttons when the textarea is in focus or out of focus, while still allowing them

I'm noticing that my style.css changes are only showing up after a hard refresh, but then they revert back to an older version when I refresh normally

The echo statement is failing to show any value following the ajax request

What is the best way to trigger a function to return a property value within the same React component file when using the map function?