Using Skrollr to hide a div while scrolling on a webpage

Hey there! I'm encountering an issue where one of my elements covers a button when it reaches the bottom. I need it to be hidden using 'display:none'. Is there a way to achieve this?

Currently, my code looks like this:-

            <header
                data-start="opacity: 1; "
                data-400p-start="opacity: 1; "
                data-450p-start="opacity: 0; "
                data-1699p-start="display: none;"
            >
                <div class="wrapper clearfix">

                    <div class="intro">
                        <h1><span>Innovative Studios Tailor Made</span>
                        <span>For Your Natural Habitat</span></h1>
                        <a href="contact.html" class="intro_btn">GET A FREE CONSULTATION</a>
                    </div>

                </div>
            </header>

The issue I am facing is that with 'display:none' set at 1699p, the entire div remains hidden from the beginning.

htmlcssparallaxskrollr

Answer №1

Managing the "visibility" can be effortlessly achieved through skrollr. Your implementation might resemble the following:

 <section
            data-start="visibility: visible; display:block;"
            data-400p-start="visibility: visible; "
            data-450p-start="visibility: hidden; "
            data-1699p-start="display: none;"
        >

Answer №2

skrollr's purpose is to create animations for CSS properties such as opacity. Yet, when specifying "display:none", there lacks a starting point for the animation to initiate. If an element overlays a button, using skrollr to handle this issue may not be optimal. Instead, consider utilizing CSS solutions (like adjusting the z-index property).

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 issue of jQuery CSS positioning failure in Chrome/Opera

My code is functioning correctly in IE and Firefox, but not in Opera or Chrome. Essentially, it generates a DIV that is placed right after the input field. In IE and Firefox, the new div overlaps the input, but in Opera and Chrome, it appears next to the l ...

jquerycssgoogle-chromeopera

Tips for Aligning Navigation Tabs/Links at Center in Bootstrap 4

I've been trying to center some tabs on a navigation bar in Bootstrap 4 without success. Additionally, I can't seem to shorten the line underneath the tabs either. Any advice or hints would be greatly appreciated. Thank you in advance. Here is m ...

htmlcssbootstrap-4nav

Tips for aligning a Twitter button and a regular button side by side on a horizontal

I have two buttons - one for Twitter and the other a normal submit button. I am struggling to align them horizontally on the same line. After experimenting with various combinations of margin settings for ".buttonLine", ".twitter-share-button", and "#newQ ...

javascripthtmlcsstwitter-bootstrap

Looking for a way to make this HTML tab appear using ng-show and an external variable in AngularJS - seeking guidance as a beginner!

Here is the HTML code snippet controlling the tab presentation: <li class="presentation" ng-show="currentUserAuthority == LIBRARIAN" > However, there seems to be an issue with the variable "currentUserAuthority" not updating until after the web pag ...

javascripthtmlangularjs

Customized HTML Template Tag

While I understand that using custom html tags is generally frowned upon for various reasons, I have a specific scenario that I believe might warrant the use of a custom html tag. I hope to either be proven wrong or discover a better way of achieving my ob ...

javascripthtmlhtml5-template

Collect input from the user for multiple lists and send them to PHP for additional processing

I'm struggling to find the error in this code... I keep getting "undefined index user_list" as the error message. Essentially, I am trying to allow users to input values into a list and then store that entire list in a database. <?php if(isset($_ ...

javascriptphphtml

Struggling to align navigation items in the center while maintaining responsiveness with CSS and Bootstrap

I am trying to achieve a responsive centering of my navbar-brand across all platforms, while also positioning my nav items and links, including the navbar-toggler, on the right side. Currently, on larger screens, it appears as shown in this image: here. Ho ...

javascripthtmlcssbootstrap-5

Tips for modifying my CSS LESS code without using the !important declaration

Here is the code I am working with: table { thead { th{ background-color: @grey-1; ... } } position: relative; &.option1 { thead { th { background - color: @grey-2; ... } } } &am ...

cssnestedless

Tips for eliminating borders in Bootstrap 4

Is there a way to remove the outline of a textbox in bootstrap 4? I've tried some solutions but they haven't worked. Any suggestions on how to achieve this? https://i.sstatic.net/TOkmS.png CSS #content #main-content input[type=text]{ border: ...

htmlcssbootstrap-4

What is preventing it from adhering entirely to the top when using position: fixed?

body { padding: 10px; } .content { background: blue; height: 200px; width: 100px; position: absolute; } <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" conten ...

htmlcss

Steadfastly positioned at the top of the page, a Div is proudly displayed showcasing a logo on the right while presenting

I'm facing an issue with my fixed div. I'd like to align my logo to the right, so it appears centered, and have my navigation links on the left. However, when I resize my browser window, the links overlap the logo, and vice versa. Is there a way ...

htmlcss

The text from one section found its way into a different section, blending seamlessly

My Skills text is mistakenly appearing in the home-section. You can see the issue in the image below: https://i.sstatic.net/Bl2GJ.png In the provided picture, the Skills section is displayed within the home section, which is not the intended layout. It&ap ...

htmlcssbootstrap-4

Unable to retrieve dropdown value using JavaScript and display it in a div

javaScript code: Retrieving data from a dropdown and displaying it in the inner HTML of a div. function showcost() { var days = document.getElementById("Ddays"); var Dudays = days.options[days.selectedIndex].text; var div = docu ...

javascriptjqueryhtmlcsslaravel-5

Issue with FullPageJS: scrollOverflow feature not functioning upon click event

I am currently working on a Fullpage.js instance that needs to be initialized with a click event and then destroyed when switching to another page, and vice versa. The scrollOverflow feature works perfectly as long as the #fullpage element is not hidden up ...

javascriptjquerycssfullpage.js

Is there a way to adjust the "click priority" for buttons that overlap?

I am facing an issue with a project where I have two buttons overlapping: a red button at the bottom and a yellow button on top. The problem lies in the fact that the yellow button is covering part of the red button. I want the red button to remain visibl ...

htmlcssangularuser-interfaceclick

Explore all attributes of a specific tag in BeautifulSoup to locate a particular word

As I was working on a web scraping project to extract prices from a specific website, I encountered a coding challenge. Here is the code snippet I used: price = soup.findAll(['div'],{'class':re.compile(r'(.*?price.*?)',re.IGN ...

pythonhtmlselenium-webdriverweb-scrapingbeautifulsoup

Incorporating ratings and heart icons next to every movie title

I am tasked with creating a simple Movie listing website where users can add or remove movies from their favorites list. Instead of a standard add to favorites button, I would like to use the heart icon from Bootstrap. Additionally, I want to display the r ...

javascripthtmlcss

Tips on designing checkboxes with CSS

Can someone help me figure out how to style a checkbox using the code below? <input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" /> I've tried applying this style but it doesn't seem to work. The chec ...

htmlcsscheckbox

The background image is causing an unwanted space to appear inconsistently across various screen sizes

Issue with spacing at various screen sizes below the two images has been persisting. Despite several attempts over the past 2-3 days, I have been unable to rectify the problem. Assistance in resolving this issue would be greatly appreciated. The relevant c ...

htmlcsstwitter-bootstrapmedia-queries

Is there a way to identify which elements are currently within the visible viewport?

I have come across solutions on how to determine if a specific element is within the viewport, but I am interested in knowing which elements are currently visible in the viewport among all elements. One approach would be to iterate through all DOM elements ...

javascripthtmlangulartypescript