A popular method for showing a div when another div is scrolled out of view, similar to the Timeline feature on Facebook

I have found Facebook's new timeline feature to be quite impressive. I particularly like the small menu that appears as you scroll down a profile, offering options to view the timeline or more information about the user. It only shows up when you reach a certain point on the page and disappears once you scroll back up.

For my project, I believe implementing a similar system would greatly enhance the user experience. Instead of using an accordion system on a long FAQ page, I am considering having a menu to the left of the screen so users can easily navigate to different questions by scrolling naturally, rather than clicking on individual FAQ titles to reveal content.

However, I am uncertain about what this type of design is called and how to develop it. Has anyone tackled a project like this before?

jqueryhtmlcss

Answer №1

After hours of searching, I finally discovered the term for what I needed - "sticky divs". My journey started with a helpful post on Stackoverflow, leading me to an informative website that explained the concept and provided the necessary code.

Experimenting with the code, I customized it to suit my requirements. In the HTML portion, I inserted:

<div id="quicknav" style="display:none;">
    <p>Navigation!</p>
</div>

And in the JQuery section:

function sticky_relocate() {
  var window_top = $(window).scrollTop();

  var div_top = $('#faq').offset().top;

  if (window_top > div_top)
    $('#quicknav').show()
  else
    $('#quicknav').hide();
  }

  // If you have jQuery directly, use the following line, instead
  $(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
  });

This implementation has resulted in a Facebook Timeline-style div, which I am delighted about!

Answer №2

I recently developed a simple FAQ page with a list of questions. As users scroll down the page, an element appears at the top after 100px: http://example.com/faq-page

$(function() {
    $(window).scroll(function() {
       if($(this).scrollTop() > 100) {
            $('#menu').fadeIn();
        } else {
            $('#menu').fadeOut();
        }
    });
});​

This script constantly monitors how far a user has scrolled on the page. If the distance is greater than 100px, the menu fades in. On the other hand, if the user scrolls back up and is 100px or less from the top, the menu fades out again.

Answer №3

If you press a button, the necessary data will be loaded to display on the page. You can then smoothly scroll down using jQuery with the following code: 

$('html, body').animate({scrollTop:1056}, 'slow',function(){ alert('scrolling is done');});

This functionality has been implemented on the following webpage:

Feel free to check out the source code where you'll find a function named showBlogEntry(id)

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 with Thymeleaf recursive function not functioning as expected

I am attempting to create a recursive list using Thymeleaf. I have a simple Java object that represents a node with a description and an array list of child nodes. However, my current HTML/Thymeleaf structure is not properly iterating through the nested le ...

htmlthymeleaf

What is the best way to generate unique mousedown callbacks on the fly?

My goal is to create multiple divs, each with a unique mousedown callback function. However, I want each callback function to behave differently based on the specific div that is clicked. Below is the code I have been using to create the divs and set the ...

javascriptjqueryhtmlcssmousedown

Access the file and execute JavaScript code concurrently

Can I simultaneously link to a file as noticias.php and call a JavaScript function? <a href="javascript:toggleDiv('novidades');" class="linktriangulo"></a> The toggleDiv function in my noticias.php file: function toggleDiv(divId) { ...

javascripthtmlhyperlink

Issue with iframes crossing domains

Imagine I have a website called example.com which embeds an iframe from domain iframe.net. My goal is to extract the content of the iframe and add a parameter to display a personalized message, such as "Hi [username]". The issue I'm facing is that I ...

javascriptjqueryhtmlmootools

What is the best way to extract an item from ng-repeat and create a hyperlink to a different webpage?

I am working with HTML code in AngularJS: <li ng-show="subCategory.status =='Active' || subCategory.status =='active'" ng-repeat="subCategory in subCategories"> <a href=""> <strong ng-click="addDetails(su ...

javascripthtmlangularjs

Exploring all the options within a dropdown menu using JQuery

Within the MVC 4 view, there is a dropdown box that, when its value changes, needs to capture all selected values. Each selection consists of three items: the Id, the visible value on the form, and a path to a file. While the functionality works for readin ...

javascriptjqueryhtmldrop-down-menu

The slidedown feature is not functioning as initially planned

As a beginner in HTML, jQuery, and CSS, I am attempting to create a navigation bar that will trigger a jQuery slidedown effect when clicked. Unfortunately, my current code is not producing the desired outcome. Below is a snippet of what I have implemente ...

jqueryhtmlcss

problem with creating a django template script

Hello, I am currently working on a code that is responsible for executing various functions within the template. I have utilized scripts to verify these functions using if-else statements and for loops. However, I am encountering some errors during this pr ...

javascripthtmljquerycssdjango

Can the minimum length be automatically filled between two elements?

I'm struggling to find a way to adjust the spacing of the "auto filling in" dots to ensure a minimum length. Sometimes, on smaller screens, there are only one or two dots visible between items. Is there a way to set a minimum length for the dots in th ...

javascripthtmlcssspace

I'm not sure how to use the global .container CSS style in Next.js for multiple pages

I'm currently diving into the world of React and Next.js, tackling a project with Next.js. I've set up a global CSS file with a .container style definition which I imported in my _app.js file. However, I'm unsure how to apply this global sty ...

cssreactjsnext.jsglobal

What is the best way to integrate a website into my blog on my site?

My website includes a blog where I use an embed code: <embed src="https://www.timeout.com/london/things-to-do/the-best-life-drawing-classes-in-london" style="width:500px; height: 300px;"</embed> Using this code works perfectly. However, when I a ...

htmlwordpress

Issue with phpMailer When Setting HTML Content

Recently, I encountered an issue while trying to send an image attachment and an HTML message using phpMailer. Despite my efforts, the page displayed an error indicating that it was not functioning properly. include 'PHPMailer-master/class.phpmailer. ...

phphtmlphpmailer

Obtain the value of the jQuery UI slider by interacting with the

Is there a ready-made solution available for displaying the slider value within the handle itself? Something like this: $( "#slider-vertical" ).slider({ orientation: "vertical", range: "min", min: 0, max: 100, v ...

javascriptjqueryjquery-uislider

My approach to using this style in React involves utilizing the class attribute as follows: "class[attribute]" [Updated version 2]

When trying to customize an element based on its attribute, the process is a bit different in React compared to pure CSS. Here's an example: <div class='something' data-test='4'></div> ... .something[data-test] { bac ...

cssreactjs

Navigation menu that is vertical and includes submenus, where the parent list item remains active even when visiting subpages

I'm currently utilizing Jekyll and Compass to construct an interactive prototype. Within one of my includes, I've implemented a sidebar navigation. The challenge arises when dealing with submenu items, as the active class on the parent (li) does ...

jqueryhtmljekyllnavigationbar

Update the hover effect specifically for mobile devices

.hovereffect a.info,.hovereffect h2{text-transform:uppercase;color:#fff} .hovereffect{float:left;position:relative;cursor:default} .hovereffect .overlay{position:absolute;top:0;left:0;opacity:0;background-color:none;-webkit-transition:all .4s ease-in-out ...

htmlcssresponsive-designbootstrap-4

Why is the text getting covered by the drop down menu?

I am currently working with bootstrap classes and I am facing an issue where the drop down menu is overlapping with the text. You can see the problem in the screenshot here: enter image description here <div class="collapse navbar-collapse" ...

htmlcssbootstrap-5

Problem with HTML relative paths when linking script sources

Having trouble with a website I constructed using Angular. The problem lies in the references to javascript files in index.html. The issue is that the paths in the HTML are relative to the file, but the browser is searching for the files in the root direct ...

javascripthtml

Maintaining a sticky footer that remains visible throughout the content as the screen is resized

For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...

htmlcss

Retrieving a singular data entry through ajax request

I have encountered an issue with my code. While using ajax to retrieve data, I am only able to get one field at a time. The value I receive is correct, so that's not the problem. It seems like there might be an issue with how my array is constructed. ...

phphtmljqueryajax