$(document).ready(function() {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function() {
$(this).removeClass('actve');
})
$(this).addClass('actve');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top + 2
}, 500, 'swing', function() {
window.location.hash = target;
$(document).on("scroll", onScroll);
var scroll_start = 0;
var startchange = $('.q-intro-text');
var offset = startchange.offset();
});
});
});
function onScroll(event) {
var scrollPos = $(document).scrollTop();
$('#q-nav a').each(function() {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#q-nav ul li a').removeClass("actve");
currLink.addClass("actve");
$('.actve').css('color', '#4d4d4d');
$('.actve').css('border-bottom', '1px solid #ff363f');
} else {
currLink.removeClass("actve");
currLink.css('color', '#898989');
currLink.css('border-bottom', '1px solid white');
}
});
}
.container { padding: 0; width: 100vw; height: 100vh; }
.menu { display: none; }
header { display: none; }
.carousel-indicators li.active { width: 1.3rem; height: 1.3rem; margin-right: 0.8rem; }
#myTopnav { display: none; }
#myTopnav .q-hamburger { display: none; }
/* Add more CSS styles here */
<!DOCTYPE html><br>
<head>
<meta charset="utf-8">
<title>Sample Page</title>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<header>
<button class="hamburger">☰</button>
<button class="cross">×</<ltbutton>
</header>
<div class="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
<div class="content">
<p>This is a sample webpage with dynamic scrolling effects.</p>
</div>
<script>
$(document).ready(function(){
$(".hamburger").click(function(){
$(".menu").slideToggle("slow");
});
$(".cross").click(function(){
$(".menu").slideToggle("slow");
});
});
</script>
</body>
The issue you are facing with the `#contact-us` div may be due to missing or incorrect CSS classes applied to it in your code. Make sure that the necessary CSS classes are defined and correctly linked to the elements within the `#contact-us` section. Check for any errors in the CSS file or script that might be affecting the styling of this specific section.