Learn the secret to displaying and concealing images with jquery!

I'm working on enhancing a question I recently published.

After scrolling down the page 200px, the image changes its size.

I'm also looking to implement additional functions that I'm struggling to make work.

Specifically, I want to achieve the following: 1) The background image should disappear when scrolling down the screen and reappear when scrolling back up.

Could this be easily accomplished?

Thank you for your assistance. Please check out my updated fiddle at http://jsfiddle.net/LLbAu/6/

$( window ).scroll(function() {
 if($(window).scrollTop() > 200){

    $("#profile-pic-bg img").css({ 
        "position": "absolute", 
        "top": "20px", 
        "left":"5px" ,
        "width":'50px'
    });

 }else{
     $('#profile-pic-bg img').css({'width': '145px',});
 }

});

Answer №1

To effectively manage the css code, it is recommended to utilize a class within css and with jquery, you can simply add and remove that class. This approach makes it easier to make changes to the styling.

$( window ).scroll(function() {
 if($(this).scrollTop() > 200)
    $("#profile-pic-bg img").addClass('scrolled');
 else
     $("#profile-pic-bg img").removeClass('scrolled');
});

and here is the corresponding css:

#profile-pic-bg img {
    position: absolute;
    top: 20px; 
    left: 5px;
    width:50px;
}
#profile-pic-bg img.scrolled {
    width: 145px;
}

}

Answer №2

Give $(document).scrollTop() a shot, and remember

$(document).ready(function(){ });
as well. If all else fails, check your console for any errors :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error message UnhandledPromiseRejectionWarning: TypeError: crypto.subtle.digest is throwing an error as it is

Encountering an error message saying "crypto.subtle.digest is not a function" when running unit tests using Jest for a function that utilizes crypto.subtle.digest(), have attempted to resolve the issue while using JSDOM with no success: 1. `[Utilizing J ...

Tips on personalizing Jquery Accordion UI

Why is the accordion panel's height set to 230, but when the webpage opens, it remains at its default height? It only resizes when I move my mouse over it. Also, why does the background color behave this way, changing to white after some height inste ...

How can the resize function be modified to include an additional 100 pixels on top of the current size?

Something interesting I discovered is that I can do the following: height() + 100); When I attempted to execute: $('.modal1').colorbox.resize({height()+100}); I was puzzled as to why it didn't work. All I wanted to achieve is to add an ad ...

Are there any other CSS properties that can achieve the same functionality as "contain: content;"?

Searching for an alternative to the contain: content; CSS property that is compatible with older browsers. Is there a solution out there? Perhaps a CSS hack or workaround? ...

What is the process for triggering events when the previous and next buttons are clicked?

Within the jQuery fullcalendar, there are previous and next buttons. Is there a way to trigger specific events when these buttons are clicked? ...

Deactivate certain choices in React Select

Encountering difficulties disabling specific options in a large list within a React Select component. A total of 6,500 options are loaded into the select element. Initially, there were issues with search functionality lagging, but this was resolved by impl ...

When the value of a react state is used as the true value in a ternary operator in Types

Attempting to implement sorting on a table is resulting in the following error: (property) direction?: "asc" | "desc" No overload matches this call. Overload 1 of 3, '(props: { href: string; } & { active?: boolean; direction? ...

ASP.NET CodeBehind Fails to Recognize Changes in TinyMCE Textarea

I have multiple <asp:TextBox TextMode="MultiLine"> elements on a webpage. Initially, I populate them using VB code behind and then convert them into TinyMCE editors with the help of the jQuery TinyMCE plugin. Each text box has an associated button fo ...

What is the process for gathering information using selenium from a webpage?

Attempting to retrieve data using Selenium and Python from a website. Below is the code that has been used so far: url = 'https://www.kicker.de/1894559/spieldaten/bayern-muenchen-14/borussia-mgladbach-15' chrome = webdriver.Chrome() select = Sel ...

Is there a way for me to verify if I have already made an AJAX data request

I have an image gallery with thumbnails. When a user clicks on a thumbnail, an ajax request is fired. I want to prevent the ajax request from firing again if the user clicks on the same thumbnail and instead use the existing data. $.getJSON(url, function( ...

Is there a method to categorize an array of objects by a specific key and generate a new array of objects based on the grouping in JavaScript?

Suppose I have an array structured like this. It contains objects with different values but the same date. [ { "date": "2020-12-31T18:30:00.000Z", "value": 450 }, { "date": "20 ...

Influence of scoped styles on external webpages

I'm facing an issue with my nuxt app where I have two pages, each with different background styles. However, the background of one page is overriding the other. index.vue <style scoped> body { background-color: #ffffff; } #banner { backgr ...

dirpagination fails to display all rows in the dataset

I've been working on creating tables with 3 divs, as shown in the link below:- https://github.com/anirbanmishra/congress.php/blob/master/web_test Additionally, I have a javascript file available here:- https://github.com/anirbanmishra/congress.php/bl ...

npm's protocol for handling callback errors

While exploring the coding style guidelines by npm, I stumbled upon a rather enigmatic suggestion: Be very careful never to ever ever throw anything. It’s worse than useless. Just send the error message back as the first argument to the callback. Thi ...

Changing the value of a previous TD element using Javascript

My page features a button that, when clicked, triggers a function to change the value in the previous TD element from "No" to "Yes". Here is the HTML snippet: <tr class="odd"> <td class="">13.00</td> <td class="">DDR</td> ...

Issue with socket malfunctioning when integrated with express

I’m encountering an issue with the socket in my program. While I can easily broadcast from any part of the program using "io" connection, I face limitations when trying to use "socket" for broadcasting unless it is within the same connection as "io." I a ...

Icon toggling menu bug

I recently designed a menu featuring an animated icon that, when clicked, opens with two columns. The issue I'm facing is that after clicking on a link in the right column (view JSFiddle), the menu disappears but requires two additional clicks on the ...

Activate text-entry fields after a button has been pressed on polymer 1.0

I am currently developing a project focused on creating a list of doctors using the Polymer 1.0 framework. Within the doctor-list, I have integrated a Vaadin grid called doctors-grid.html to display data sourced from a JSON file. Upon double-clicking on a ...

The element's position remains unchanged after the .click re-event in the function

Welcome to my first attempt at using jQuery! Please bear with me as I navigate through this learning process. Here's the challenge: I have a series of elements in my HTML. <div class="garden"> <div class="point left">&#9668;</d ...

Protecting against overflow for text inside a container that changes when hovered over

There is text displayed on top of an image within a div container that functions as a link. <a href="https://link.com" style="color:white"> <div class="thumbnail"> <img src="image.jpg" clas ...