problem in scrolling

Report · Oct 28, 2022

Hello friends

I have a question.

I'm using this code for a website I'm building.

It works. But there is something that bothers me.

When I scroll down the window a little, there is a kind of "jump" downwards. What do I need to change in the code so that it doesn't exist?

<!DOCTYPE html>

<html>

<head>

<title>Sticky Navbar</title>

<style>

body {

margin: 0;

}

.fixit {

position: fixed;

top: 0;

}

.main_navigation {
background-color: #000;
width: 200px;
color: #fff;
}

.main_navigation h3 {

margin: 0;

}

header, .content {

width: 85%;

margin: 0 auto;

}

</style>

</head>

<body>

$(document).ready(function() {

var fixit = "fixit";

var height = $('header').height();

$(window).scroll(function() {

if ($(this).scrollTop() > height) {

$(".main_navigation").addClass(fixit);

} else {

$(".main_navigation").removeClass(fixit);

}

});

</script>

<nav class="main_navigation">
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Navigation goes here <a href="#link1">בב</a></td>
</tr>
</tbody>
</table>
</nav>
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="244" bgcolor="#9D4446"> 
ב
ב
ב
בב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
בב
ב
ב
ב
ב
ב
ב
 
 
This is a line of 3333
ב
ב
 </td>
</tr>
</tbody>
</table>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>

</html>

Report · Oct 28, 2022

You don't really need to use javascript these days to make the navigation bar 'sticky' you can use css. The solution I provided in the other thread you have been reading is 5 years old - things have improved since those days. Just add the below css to your 'main_navigation' css selector:

position: sticky;
top: 0;

position sticky has 96% browser support.

I have no idea why you are using tables either, that's not a good approach, you should just use some simple html structure:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Navbar</title>
<style>
body {
margin: 0;
}
.main_navigation {
background-color: #000;
width: 100%;
color: #fff;
position: sticky;
top: 0;
}
</style>
</head>

<body>

<nav class="main_navigation">
Navigation goes here
</nav>

<div class="main_content">
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
</div>
<!-- end main_content -->
</body>

</html>

Report · Oct 29, 2022

Hey
Thank you very much for helping me, I would appreciate it if you could help me with one more thing:
I want the navigation menu above to have a link like this, when I click on it, a pop-up menu opens: (for mobile)

Report · Oct 29, 2022

Side nav push menu.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 29, 2022

Thanks, looks good
Is it possible for the menu to open downwards?

Report · Oct 29, 2022

can the menu closed after choosing a selection from the menu?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

.sidenav a:hover {
color: #f1f1f1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

#main {
transition: margin-left .5s;
padding: 16px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
<a href="javascript&colon;void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<table width="200" border="1">
<tbody>
<tr>
<td bgcolor="#8B4547"><a href="#link2">בב</a></td>
</tr>
</tbody>
</table>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>

<div id="main">
<h2>Sidenav Push Example</h2>
Click on the element below to open the side navigation menu, and push this content to the right.
☰ open
</div>

בהבה
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
This is a line of 3333
ב
ב
ב
ב
ב
בב
בב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
ב
  
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
</html>

Report · Oct 29, 2022

And one last very important thing. Is it possible for the menu button to always remain on top - even when scrolling?

Report · Oct 29, 2022

By default, Bootstrap's navbar bar does exactly what you want -- sticky-top, black background, hamburger menu on mobile.

Copy & paste this code into a new, blank document. Save & preview in browsers.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--latest minified Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Link</a>
</li>
<li>
<a class="dropdown-item" href="#">Another link</a>
</li>
<li>
<a class="dropdown-item" href="#">A third link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col h-100 p-4 bg-light border rounded-3 mx-auto text-center">
<h2>Bootstrap 5 in Dreamweaver</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores totam, amet quas harum et expedita aperiam excepturi deserunt ea tempora cupiditate! Blanditiis architecto sed, ea esse ratione ipsa maiores aut.</p>
<h3>Button collapse/expand Demo</h3>
</div>
</div>
<!--begin demo-->
<div>
<button class="btn-lg  btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Click Me! </button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<p>Some placeholder content for the collapse component. 
This panel is hidden by default but revealed when the user activates the relevant trigger.</p>
<p>&nbsp;</p>
</div>
</div>
<!--/end collapse-->
</div>
<!--/demo-->
</div>
<!--/container-->

<!--latest minified Bootstrap JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Using Bootstrap to build your site will save you hours of time.

https://www.w3schools.com/bootstrap5/index.php

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 29, 2022

Great!!!! Great!!!

One last thing. Can you change the code so that the background of the menu will be black and the text will be white? attached
Because I couldn't change. maby to creat css file?

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#link1">Link</a>
</li>
<li>
<a class="dropdown-item" href="#">Another link</a>
</li>
<li>
<a class="dropdown-item" href="#">A third link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
cvcvcv
c
c
c
c
c
c
c
 
c
c
c
 
c
c
c
c
 
c
c
c
c
c
c
c
c
c
c
c
c
c
c
c
c
c
cccccccccccc
c
 
</body>
</html>

Report · Oct 29, 2022

Great!!!! Great!!!

One last thing. Can you change the code so that the background of the menu will be black and the text will be white? attached Because I couldn't change. maby to creat css file?

==========

You're welcome.

1. The nabvar background is already dark. 😕

If you change the dropdown, nobody can read it.

2. No code should follow the Bootstrap JS link except </body> and </html> tag.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Before you proceed, learn to use Bootstrap.

Start here: https://www.w3schools.com/bootstrap5/

Read chapters, do code exercises, take quizzes at the end. It's required knowledge.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 29, 2022

Could you please put the top menu inside a table ? When I put it inside a table it destroys everything

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#link1">Link</a>
</li>
<li>
<a class="dropdown-item" href="#">Another link</a>
</li>
<li>
<a class="dropdown-item" href="#">A third link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
~~cvcvcv~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~ ~~
~~c~~
~~c~~
~~c~~
~~ ~~
~~c~~
~~c~~
~~c~~
~~c~~
~~ ~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~c~~
~~cccccccccccc~~
~~c~~
~~ ~~
</body>
</html>

Report · Oct 29, 2022

NO. Tables are not responsive. Tables should NEVER be used for layouts!! Use semantic & non-semantic HTML tag structure.

Example:

https://www.w3schools.com/html/html5_semantic_elements.asp

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 29, 2022

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Oct 30, 2022

Hey
I'm not happy with you anymore, nevertheless I would appreciate it if you could help me with 2 more things:
1. Fix the code so that the padding of the top div is 0.
2. Change the entire navigation bar so that it is dark gray and not black. Situation.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top" >
<table width="520" border="0" cellpadding="0" cellspacing="0" bgcolor="#C56365" class="card-header">
<tbody>
<tr>
<td width="374" height="57"><img src="Screen Shot 2022-10-29 at 23.43.19.png" width="97" height="57" alt=""/></td>
<td width="146" height="57"><div class="container-fluid">
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item" style="color: #DB272A">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"><img src="Screen Shot 2022-10-29 at 23.43.19.png" width="68" height="41" alt=""/></a>
<ul class="dropdown-menu">
<li> <a class="dropdown-item" href="#link1">Link</a> </li>
<li> <a class="dropdown-item" href="#"> <img src="Screen Shot 2022-10-29 at 23.43.19.png" width="97" height="64"></a> </li>
<li> <a class="dropdown-item" href="#">A third link</a> </li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<td height="25" bgcolor="#B14647"> </td>
<td bgcolor="#B14647"> </td>
</tr>
</tbody>
</table>
</nav>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
cvcvcv
c
c
c
c
c
c
c
 
c
c
c
 
c
c
c
c
 
c
c
c
c
c
c
c
c
c
c
c
c
c
c
c
c
c
cccccccccccc
c
 
</body>
</html>

Report · Oct 30, 2022

Hey I'm not happy with you anymore, nevertheless I would appreciate it if you could help me with 2 more things: 1. Fix the code so that the padding of the top div is 0. 2. Change the entire navigation bar so that it is dark gray and not black.

=============

Words escape me. 😱

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 30, 2022

I did not understand

Report · Oct 30, 2022

Your code is a car wreck.

Either learn Bootstrap or pay a developer to build a custom website for you. I'm done here.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 30, 2022

I really appreciate what you have done so far.

Report · Oct 30, 2022

Hey I'm not happy with you anymore, nevertheless I would appreciate it if you could help me with 2 more things: 1. Fix the code so that the padding of the top div is 0. 2. Change the entire navigation bar so that it is dark gray and not black.

=============
Words escape me. 😱
By @Nancy OShea

AI is alive and not so well.

Report · Oct 29, 2022

OK, I see what you want now. Try this:

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 30, 2022

Using Bootstrap to build your site will save you hours of time.
https://www.w3schools.com/bootstrap5/index.php

By @Nancy OShea

Rubbish, it will only save you time if you know how to use it and if youre already a competent coder you won't need it in the first instance, so it really saves zero time at all but adds a tremendous amount of unnecessary code bloat.......hmmmm.

Report · Oct 28, 2022

As @osgood_ said, don't use outdated layouts from last century. Time to move to modern code and best practices.

For working code examples, look at the W3Schools website.

https://www.w3schools.com/

If you use Bootstrap responsive layouts, there's a built-in class called .sticky-top which will do what you need in Bootstrap documents. No additional coding required.

https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_navbar_fixed_sticky&stacked=h

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

Nancy O'Shea— Product User, Community Expert & Moderator

problem in scrolling

2 Correct answers