What steps can I take to ensure that the div doesn't overlap with the scrollbar while still maintaining the functionality of my JQuery ScrollTo plug-in?

Currently troubleshooting an issue with a website I'm constructing. Utilizing the jQuery plug-in "scroll to" for a single-page layout with multiple sections, I am aiming to keep the navigation bar fixed at the top of the page while allowing users to scroll down using one scrollbar on the right-hand side.

To prevent the navigation bar from overlapping the scrollbar, I attempted removing "overflow:auto;" from the 'wrapper' div as suggested in a solution. However, this caused issues with my ScrollTo plug-in, rendering the links non-functional.

If you'd like to check out my website and offer any assistance or insight, it can be downloaded via this link > . It's a small site, so downloading won't take long.

Your help would be immensely appreciated. Thank you in advance!

Answer №1

Is there a reason for containing your content in an overflowing wrapper div? It seems that the issue arises from the wrapper having a lower z-index than the top bar. Perhaps eliminating the wrapper altogether and allowing the content to overflow naturally would resolve this problem!

Consider updating your index file with the following code:

<html lang="en">
<head>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>

<script>

$(document).ready(function() {

    $('a.panel').click(function () {

        $('a.panel').removeClass('selected');
        $(this).addClass('selected');

        current = $(this);

        $(document).scrollTo($(this).attr('href'), 800);        

        return false;
    });

    $(window).resize(function () {
        resizePanel();
    });

});

function resizePanel() {

    width = $(window).width();
    height = $(window).height();

    mask_height = height * $('.item').length;

    $('#debug').html(width  + ' ' + height + ' ' + mask_height);

    $('body .item').css({width: width, height: height});
    $('body').css({width: width, height: mask_height});
    $(document).scrollTo($('a.selected').attr('href'), 0);

}

</script>
<title>Young Women 4 Young Women - Breast Cancer Support Group - Southmead Hospital, Bristol</title>
</head>
<body>



<div id="top-wrap">
<div id="top-bar"></div> <!-- CLOSE TOP-BAR -->

<div id="navigation-wrapper">
    <div id="navigation-bar">
        <div id="navigation-main">
    <a href="#item1" class="panel">HOME</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#item2" class="panel">ABOUT THE GROUP</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#item3" class="panel">SCHEDULE</a>
</div>  <!-- CLOSE NAVIGATION-MAIN -->

<div id="navigation-main-2">
    <a href="#...

Your website is definitely showing promise! Keep up the good work.

Kpsuperplane

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

Is it possible to use rounded divs and buttons exclusively on iOS devices? Leveraging jQuery, AJAX,

Recently, I have been developing a client application that consumes an API and dynamically generates buttons. The project has been running smoothly on various platforms, with Chrome dev tools indicating no issues on any device. However, after testing it on ...

What are the steps to create a white or transparent video background and alter the header color?

Quietly admitting, my JS skills are not very strong. I noticed that when we scroll the mouse for the first time, the video brightens (opacity?) and the header text changes from white to black. Can you demonstrate how to achieve this effect? I would like to ...

issues with background image alignment in css

I attempted to add a sticky background to a div, which was successful. However, I am encountering an issue where the background does not stretch enough during scrolling. Below is the CSS code I used to apply the background, along with screenshots displayin ...

What is the best way to generate a variable amount of div elements with constantly changing content using Angular2?

I'm not entirely sure on the process, but I believe ngFor would be used in this scenario. Essentially, my goal is to generate the following div multiple times, with each iteration updating the value inside the brackets from 0 to 1, 2, and so forth... ...

Incorporating the <sub> element while maintaining the line height

I am facing a challenge with formatting text that includes subscripts and superscripts tags. For example: <div>hello <sub>world</sub>, how are you? Translated as logical aggregates or associative compounds, these characters have been int ...

Is there any HTML code that is able to implement a currency format identical to the one we've customized in Google Sheets/Google Apps Script

I am currently working with a Google Sheet table that consists of 2 columns. The second column contains charges which can vary based on user input through a Google Form and are summed up using GAS. To view an example, click here. The data from this Googl ...

Combining AJAX with the MVC architecture in C# programming

My experience with AJAX is limited, and I am not very familiar with JavaScript either. I have a page (Product Browser) that is structured as follows: Navigation (First, Prev, 1, 2, 3 Next, Last) - requires full page refresh Items per Page drop down - I ...

What's the secret to creating floating content in one go?

Here is the code I am working with: <div class="coupon-price"> <div class=""> <span class="coupon-new-price"> 65.000</span> </div> <div class=""> <span class="coupon-old-price"> 130.000</span> ...

Upload files with either a Flash or AJAX uploader

When deciding between an AJAX or JQuery upload plugin versus a Flash upload plugin for browser uploads, it's important to consider the differences, especially when dealing with very large files (1-2GB). Is there a specific advantage to choosing one ov ...

Set a checkbox to be pre-checked on page refresh using a PHP conditional statement

Thank you for your patience and understanding as I seek help with my issue. I am currently working on a form that consists of checkboxes which control the boolean values in a database. Upon submission, these values are updated in the database and the page ...

In JavaScript, use the following code to replace "(" with "(":

Is there a way to dynamically transform the string "Test(5)" into "Test\(5\)" using JQuery or Javascript? I attempted this approach, but it did not work as expected var str = "Test(5)"; str = str.replace("(","\("); str = str.replace(")"," ...

CSS Styling to Align Form in Table Cell

I have some old HTML code without a CSS framework, so I'm using tables for layout. My current challenge is trying to horizontally center my form, while keeping the form fields left-aligned. Essentially, I want to achieve the following design: +------ ...

Triggering a JQuery click event programmatically using another click event

Below is the code snippet: <label style="display: inline; " for="default"> <img class="ful" src="http://www.mysite.com/default.png" /> <input style="display:none" id="default" name="selected" type="radio" value="template" onclick="SubmitVal ...

Creating Json for jsTree can be done by following these steps

Yesterday, I stumbled upon the versatile jsTree plugin and was really impressed. Does anyone happen to have a SQL sample that creates JSON data for it? ...

Using table.column as a function in jQuery datatabbe is not supported

When using jquery datatable, I encountered an error stating "table.column is not a function." <script> $(document).ready(function() { var table = $('#lsotable').dataTable(); $("#lsotable thead th").each( function ( i ) { ...

Unravel the encryption on script file (.js)

I am faced with a challenging encrypted script that requires decryption. Here is the code snippet in question: eval(function (p, a, c, k, e, r) { e = function (c) { return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? ...

Sticky Sidebar Attached to Parent Container with Smooth Sliding Effect

Is it possible to have my sidebar push the content across when opened, while keeping the fixed navigation relative to its parent element instead of the viewport? The sidebar works fine in Firefox but breaks out of the parent in Chrome. Link to JSFiddle & ...

Is your Flexbox element exceeding the height of its parent container?

Due to design constraints, I implemented flexbox for this scenario and required the btn p elements to behave like display block. This was achieved through a post on another stack exchange thread. However, after setting the "other divs" class to 100%, it ex ...

Submitting PHP Ajax form automatically, no user input required

Is there anyone who can help me with this issue? I recently set up a PHP Ajax form on my website that is validated using jQuery. All fields must contain content for the form to be submitted successfully. However, I am encountering an unusual situation wh ...

Personalized Styling: Transform the Color of the Active Navigation Pill

I am working with Pill tabs that are assigned the color #d7e5ea. The goal is to change the color of the active pill tab to #83a8b5 while keeping the inactive ones at #d7e5ea. Is there a specific custom CSS code that can be used to achieve this color chang ...