Reveal content as you scroll

I'm having trouble with the code snippet below. My goal is to utilize .cbp-fbscroller in my CSS to show a new side navigation menu on my HTML page only when scrolling down to 900px. However, as someone who is new to JavaScript, I am struggling to make this code work.

Once the scroll reaches 900px, the side navigation should become visible. I have created a fiddle so that you can see more of the code

Demo

$(document).scroll(function(){
    if ($(document).scrollTop() >= 100) {
        if ($(".main").css('display') === 'none') {
            $(".cbp-fbscroller").fadeIn('slow');
            $(".main").prev().fadeOut();
            $(".cbp-fbscroller").next().fadeOut();
        }
    } else {
        /* if ($(".main").css('display') !== 'none') {
            $(".cbp-fbscroller").fadeOut('slow');
            $(".main").prev().fadeIn();
            $(".cbp-fbscroller").next().fadeIn();
        } */
    }
})
javascriptjqueryhtmlcss

Answer №1

It seems like you're looking for a solution to your query. Here's what you can do:

$(function() {

  $(window).on('scroll', function() {

    if ($(window).scrollTop() >= 900) {
       $('.cbp-fbscroller nav').fadeIn('slow');
    } else {
       $('.cbp-fbscroller nav').fadeOut('slow');
    }

  });

});

You can also check out this jsfiddle link for reference: http://jsfiddle.net/6oaxt61a/10/

Additionally, don't forget to make a change in your HTML code as well:

<nav>

Replace it with:

<nav style="display:none;">

Answer №2

Based on my understanding of your goal, your code should resemble the following:

$(document).scroll(function(){
    if ($(document).scrollTop() >= 100) {
        if ($(".main").css('display') === 'none') {
            $(".cbp-fbscroller").fadeIn('slow');
            $(".main").prev().fadeOut();
            $(".cbp-fbscroller").next().fadeOut();
        }
    } else {
        /* if ($(".main").css('display') !== 'none') {
            $(".cbp-fbscroller").fadeOut('slow');
            $(".main").prev().fadeIn();
            $(".cbp-fbscroller").next().fadeIn();
        } */
    }
})

The commented-out section is there in case you need to undo the changes.

Here are some areas for improvement:

  1. No event was attached initially, but that has been resolved by adding 
    $(document).scroll(function(){...
    .
  2. Using '"foobar"' will result in an error. Instead, consider using either 'foo' or "bar".

I hope I have correctly understood your intentions.

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

React Jodit Editor experiencing focus loss with onchange event and useMemo functionality not functioning properly

I'm currently working on a component that includes a form with various inputs and a text editor, specifically Jodit. One issue I've encountered is that when there are changes in the Jodit editor's content, I need to retrieve the new HTML va ...

javascriptreactjsjodit

Conceal the cursor within a NodeJS blessed application

I am struggling to hide the cursor in my app. I have attempted various methods like: cursor: { color: "black", blink: false, artificial: true, }, I even tried using the following code inside the screen object, but it didn't work: v ...

javascriptnode.jsblessed

What is the purpose of making a "deep copy" when adding this HTML content?

My canvas-like element is constantly changing its contents. I am attempting to execute a function on each change that captures the current content and adds it to another element, creating a history of all changes. window.updateHistory = func ...

javascriptjqueryhtmlcopyappend

The sticky menu feature in jQuery does not assign classes to elements after the page is refreshed; it will only work when scrolling is activated manually

Currently, I am customizing a WordPress theme and have incorporated this jQuery code snippet to ensure that the menu sticks to the top of the page when the user scrolls down: /* ----------------------------------------- Fixed navigation on scroll -------- ...

jquery

Having issues with NextJs app router and redux-toolkit not resetting to initial state after server-side rendering (SSR)

I am facing a challenge in my NextJs project with the app router and redux/toolkit for state management. When navigating from one page to another, the data fetched on the previous page remains in the redux state even though it wasn't fetched on the cu ...

javascriptreactjsnext.jsreduxredux-toolkit

Utilizing React's Conditional Rendering Alongside Bootstrap to Maintain the Layout Intact

I'm currently developing a project using React and Bootstrap that involves incorporating a large bar graph with two smaller boxes, all positioned horizontally together. To visualize how it should appear, please expand the pen window to see them arran ...

javascripthtmlcsstwitter-bootstrapreactjs

Trouble with toggling div visibility using jQuery and AJAX

I'm trying to display a specific div based on the result of an SQL query. The problem I'm facing is that I can't seem to toggle the divs asynchronously. Currently, the page needs to be reloaded for the div to reflect the changes. <?ph ...

phpjavascriptjqueryajax

The function signature '(newValue: DateRange<dateFns>) => void' does not match the expected type '(date: DateRange<unknown>, keyboardInputValue?: string | undefined) => void' as per TypeScript rules

I'm currently utilizing the MUI date range picker from https://mui.com/x/react-date-pickers/date-range-picker/. Here's my code snippet: <StaticDateRangePickerStyled displayStaticWrapperAs="desktop" value={valu ...

javascripttypescriptmaterial-ui

Leveraging TypeScript enums in conjunction with React to anticipate a string prop

Trying to enforce strict typing for a Button component in React. How can I ensure a prop has a specific string value? The current effort yields Type '"primary"' is not assignable to type 'ButtonLevel' enum ButtonLevel { Primary = ...

javascriptreactjstypescript

A step-by-step guide on how to implement a window scroll-controlled color transition

I've implemented jQuery code to change the opacity of my navbar's background as the user scrolls, transitioning from transparent to blue. Here's the snippet: $(window).scroll(function(){ var range = $(this).scrollTop(); var limit = 45 ...

javascriptjqueryhtmlcssscrolltop

Troubleshooting issue: Click function not responding inside Bootstrap modal

Below is the JavaScript code for my click function $(".addPizza").on("click", function(event) { event.preventDefault(); console.log("hello") let userId = $("#userId").attr("data-id"); let pizzaRecipe = $('#pizza-recipe').val().trim(); ...

javascriptjqueryajaxbootstrap-4

The Jquery tooltip feature consistently displays the title of the header as the tooltip

Currently, I am utilizing the default Jquery tooltip library, and it functions wonderfully with one exception. In Firefox, the tooltip always displays the title of the page (within <head>). For example: <title>My Title</title></head> ...

javascriptjquerytooltip

Setting maximum and minimum zoom limits for an element ID using JavaScript or jQuery

My application features a DIV element with the unique identifier of mainDiv. The issue I am facing is related to zooming functionality, as it currently lacks any set limits - both for scaling up and scaling down. I have been searching on Google for a sol ...

javascriptjqueryhtmlcss

Comparing S3 and DynamoDB for Hosting Static Content

My current project involves showcasing Terms and Conditions for Order fulfillment to customers making purchases on my online platform. Considering the fact that T&C is a static element that doesn't change frequently, I am considering storing this ...

htmlamazon-web-servicesspring-bootwebamazon-s3

"Why is it that the keypress event doesn't function properly when using the on() method

My goal is to capture the enter event for an input field $("input[name='search']").on("keypress", function(e){ if (e.which == '13') { alert('code'); } }); This is the HTML code snippet: <input name="searc ...

javascriptjquery

Creating a vertical triangle pointing to the right as the border of a div element

Currently, I'm working on a mockup that includes the following elements. I am attempting to ensure that the triangular right end of the "Delay Your Payments" div matches the mockup exactly. To achieve this, I aim to use CSS without relying on sliced ...

css

Generating rows within Angular while implementing ng-repeat

In my code, I am facing an issue where posts from the API are being repeated and displayed in rows of 9. My objective is to create a grid layout with 3 rows, each containing 3 posts. Unfortunately, the solution I attempted did not work as expected. I also ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrap

Error encountered: The use of 'import' and 'export' is limited to 'sourceType: module' when attempting to install Tweakpane

I am currently learning JavaScript and have been following a course on Domestika that requires me to install the Tweakpane package. I usually use Git Bash for installing packages, and I have successfully installed others this way before. Here is the proces ...

javascriptnpmpackagenpm-install

Using Express.js to import a SQL file

I am facing challenges while attempting to import an sql file into Express JS. I have tried various codes involving the mssql and fs modules, but none seem to be working as expected. fs.readFile(__dirname +'/database.sql', function (err, sqlFile ...

javascriptmysqlnode.jsfileexpress

Using React Native to dynamically change color based on API response

I'm currently working on a React Native project and I have a requirement to dynamically change the background color of a styled component based on the value retrieved from an API. However, I'm facing some challenges in implementing this feature. ...

javascripttypescriptreact-nativeexpostyled-components