The stick division shows some bouncy behavior when seen on a mobile device

When viewing on mobile, the #main-categories div seems to be jumping instead of smoothly sticking to the top. What could be causing this behavior?

Here is the code snippet I have:


var s = $("#main-categories");
var pos = s.position();
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();

    if (windowpos >= pos.top) {
        s.addClass("stick");
    } else {
        s.removeClass("stick");
    }
});    

Sample jsfiddle: https://jsfiddle.net/o1rrwwp0/

Thank you!

Answer №1

In my opinion, the problem can be resolved by simply changing:

.stick {top:50px;}

to:

.stick {top:0;}

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

Tips for repositioning the window when linking to a different section of a website

As a beginner in HTML and CSS, I am currently working on adding a navigation bar to my one-page website. I want the navigation bar to smoothly guide users to different sections of the page when they click on a link. To achieve this, I am using anchors and ...

Retrieve the added attribute value of a RadioButton using JQuery

Currently, I am faced with a frustrating issue. On my website, I have a RadioButton to which I added an attribute as shown below: in ...asp <div id="radio" class="C_Radio"> <asp:RadioButton id="rad1" GroupName="typeSelect" runat="server" ...

Want to know how to center the value of a slider range input in your React project using NextJS and Tailwind

Can someone help me with the issue I'm having with the offset? Is there a way to link a value to the thumb? I've tried two methods, but one gives a significant offset and the other gives less. However, it seems more like a workaround than a solu ...

The <br/> tag is not functioning properly when retrieving text from a MySQL query

Currently, I am involved in a project that involves an A.I pushing text onto a MySQL database. Our goal is to display the ongoing writing process on a webpage. We are still actively working on this. We are retrieving the data and regularly checking the da ...

Styling tooltips using only css - Dealing with overflow issues

What is the best way to effectively showcase these tooltips? When using overflow visible, the issue is resolved, but it causes other elements to spill out of the div. How can this be addressed? HTML: <div id="test"> <a title='Sample tooltip& ...

How to use jQuery to maintain an image at the top of a div

Within my HTML, there is a primary root div element containing an image. <div id="root"> <img id="msg"/> </div> Using jQuery, I am able to prepend multiple div elements inside the main root div. However, the problem arises when these ...

The problem with the Bootstrap Navbar Dropdown is that it opens up within the confines of

I have created a navigation bar using Bootstrap 4 and included the .navbar-bottom class to enable scrollbar functionality when there are more menu items than the total width of the page. However, an issue has arisen where the Bootstrap 4 navbar dropdown o ...

Summary Table Row Expansion and Contraction Feature in AngularJS

Looking for assistance in creating a table layout using angularJS? I'm having trouble figuring out the most efficient way to achieve this. Any ideas on how I can structure my table based on the following object? Here is the object I want to use: var ...

An alert must be displayed before executing any jQuery function

On my website, I have implemented click functions that toggle the class of specific elements when clicked. Here is an example of the code: $(".phenomenology_toggle_box").click(function() { pageClicked = '.phenomenology_toggle_box'; escCl ...

The challenges of $location.search().name and base href in application URLs

I am working on an Angular app and my URL appears as http://localhost:8080/personal?name=xyz. To extract the 'xyz' value in JavaScript, I am using $location.search().name. Here is a snippet of my code: app.js app.config(function ($locationProv ...

Exploring jQuery to compare and distinguish the variances within 2 JSON arrays

Looking for help with comparing elements in two JSON arrays using jQuery? Specifically, I want to compare elements (a,b) from array1 against array2 and identify any differences. Here's the code I've tried so far, but it's giving unexpected o ...

Error encountered while attempting to import external JSON data into SurveyJS

This Codepen example showcases SurveyJS using a simple JSON structure: var json = { "questions": [{ "type": "text", "title": "Test question 1", "name": "Test question" }, { "type": "comme ...

What is the best way to delete the text following the last "/" in location.href with the help of

I need to extract #step_4#step_4#step_4 from the local project URL The link is https://localhost/test-project/#step_4#step_4#step_4, and I aim to achieve this using window.location.href. This is the code snippet I have implemented: var url_id = window.lo ...

Invisibility Problem

As a newcomer to web design, this is only the second website I have ever created. However, I am facing an issue with my Nav bar that I cannot seem to resolve. I want my "Other Pages" section to be visible when the screen size is below 600px and hidden when ...

What is the secret to creating a button that can sort text and another button that flips the word density in my content?

I'm not a fan of having something like this because it's displeasing to the eye: https://i.stack.imgur.com/3F4sp.jpg Instead, I prefer my word density to be more organized and structured. How can I achieve this? Sort by highest word density fi ...

Is it possible to invoke a user control code behind method using JQuery ajax?

Is it possible to call a user control code-behind method using jQuery ajax? ASCX CODE: <script type="text/javascript> function ShowCurrentTime() { $.ajax({ type: "POST", url: "Uploads.aspx/GetCurrentTime", data: '{ ...

The JavaScript function document.getElementById.onclick is not functioning as expected

One issue I am facing involves counting all downloads on my website. My current approach is to increment a value in my database each time a download button is clicked, and then display this value. Despite trying multiple methods, the download count always ...

Obtain saved browsing history in HTML5 with the use of JavaScript

I'm currently utilizing the History.js library found at https://github.com/browserstate/History.js/ to create an AJAX-based application that leverages the HTML5 History API for dynamically changing the URL and title of the browser. Does anyone have s ...

The JavaScript code that functions properly in Codepen is not functioning on my HTML page

Can you help me understand why this code is working fine in CodePen, but not on my HTML page? I'm unable to identify the error that may have occurred. Any assistance would be greatly appreciated! I suspect there's an issue with connecting some jQ ...

Ways to determine the position of elements when they are centered using `margin:auto`

Is there a more efficient way to determine the position of an element that is centered using CSS margin:auto? Take a look at this fiddle: https://jsfiddle.net/vaxobasilidze/jhyfgusn/1/ If you click on the element with the red border, it should alert you ...