Color Change of Navigation Buttons When Scrolling Up and When Scrolling Down

Swift & Navigation : Navigation Bar changes its background color when scroll the view

Paste this to AppDelegate and if you have tab bar also then paste tabbarappearance also it will work.

if #available(iOS 15, *) {
                let navigationBarAppearance = UINavigationBarAppearance()
                navigationBarAppearance.configureWithOpaqueBackground()
                navigationBarAppearance.titleTextAttributes = [
                    NSAttributedString.Key.foregroundColor : UIColor.white
                ]
                navigationBarAppearance.backgroundColor = UIColor.blue
                UINavigationBar.appearance().standardAppearance = navigationBarAppearance
                UINavigationBar.appearance().compactAppearance = navigationBarAppearance
                UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance
            
            let tabBarApperance = UITabBarAppearance()
            tabBarApperance.configureWithOpaqueBackground()
            tabBarApperance.backgroundColor = UIColor.blue
            UITabBar.appearance().scrollEdgeAppearance = tabBarApperance
            UITabBar.appearance().standardAppearance = tabBarApperance
        }

How can i fix my images while scrolling down it comes on top of navbar while the texts are not

You can set the z-index of the navbar.

W3Schools Article

For example:

#navbar {
    z-index: 999;
}

The navbar now displays on top of anything with a z-index below 999.

Change navbar color while scrolling

If you are using pure javascript:

Firefox and IE has the overflow at html while Chrome, Safari and Opera places it at the body level:

See here for more info:

var body = document.body; // For Chrome, Safari and Opera

var html = document.documentElement; // Firefox and IE places the overflow at the
level, unless else is specified. Therefore, we use the
documentElement property for these two browsers

So you must use this:

if (document.body.scrollTop >= 280 || document.documentElement.scrollTop >= 280) {

and it will work cross-browser. Cheers!

var myNav = document.getElementById("nav");
window.onscroll = function() {  "use strict";  if (document.body.scrollTop >= 280 || document.documentElement.scrollTop >= 280) {    myNav.classList.add("scroll");  } else {    myNav.classList.remove("scroll");  }};

body {  margin: 0;  padding: 0;  height: 4000px;}.nav {  position: fixed;  width: 100%;  height: 60px;  background-color: #111;  transition: all .5s ease-in-out;}.scroll {  background-color: transparent;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav" class="nav"></div>

Navigation bar only have background when scroll

You need opaque appearance, because default one means system-selected-by-design which is changed from version to version.

    let navBarAppearance = UINavigationBarAppearance()
    navBarAppearance.configureWithOpaqueBackground()
    UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance

Tested with Xcode 13.3 / iOS 15.4 (in ContentView.init)

Note: onAppear is too late to inject above code, the appearance settings are applied on objects created after it, and onAppear is called after NavigationView created. So use it either in init, or anywhere else, but before view created.

How to make sticky navigation change colour when scrolling past a certain div?

I think what you meant to have is the sticky navbar, and changing background when the main content reaches it on scroll. See the updated code and the pen demo as follows.

$(document).ready(function () {    var scroll_start = 0;    var startchange = $(".maintext");    var offset = startchange.offset();
    if (startchange.length) {        $(document).scroll(function () {            scroll_start = $(this).scrollTop();            if (scroll_start > offset.top) {                $("nav").css('background-color', 'rgba(0,0,0,.75)');            } else {                $('nav').css('background-color', 'transparent');            }        });    }});

* {    box-sizing: border-box;    margin: 0;    padding: 0;}body {    background: #666;    min-height: 5000px;}header {    /* background-image: url('images/main.jpg'); */    background-position: center center;    background-size: cover;    position: relative;}nav {    position: fixed;    width: 100%;    top: 0;    right: 0;    z-index: 1;    letter-spacing: .2em;    line-height: 1;    padding: 30px;}nav ul {    text-align: right;    list-style: none;    padding: 0;    margin: 0;}nav li {    padding: 0 10px;    display: inline-block;}nav li:last-child {    border-right: none;}nav li a {    padding: 10px;    color: white;    display: block;    font-weight: 400;    text-decoration: none;    color: #FFFFFF;    font-family:'Raleway', sans-serif, Helvetica, Verdana;    text-transform: uppercase;    -webkit-font-smoothing: antialiased;}nav li a:hover {    background-color: rgba(40, 40, 40, 0.5);    -moz-transition: all .3s ease;    -o-transition: all .3s ease;    -ms-transition: all .3s ease;    -transition: all .3s ease;    -webkit-transition: all .3s ease;    -webkit-font-smoothing: antialiased;}.logo {    width: 200px;    display: block;    float: left;    font-size: 1.8em;    font-weight: 800;    text-decoration: none;    color: #FFFFFF;    font-family:'Raleway', sans-serif, Helvetica, Verdana;    text-transform: uppercase;    font-weight: bold;    letter-spacing: 5px;}.logo a {    font-size: 1.8em;    font-weight: 800;    text-decoration: none;    color: #FFFFFF;    font-family:'Raleway', sans-serif, Helvetica, Verdana;    text-transform: uppercase;    font-weight: bold;    letter-spacing: 5px;}.clears {    clear: both;}.maintext {    padding-top: 90px;    margin: 200px auto;    width: 600px;    text-align: center;    color: white;}.maintext h1 {    font-weight: 600;    font-size: 1.8em;    line-height: 1.2em;    text-transform: uppercase;    letter-spacing: .1em;    color: #FFFFFF;    font-family:'Raleway', sans-serif, Helvetica, Verdana;    padding-bottom: 15px;}.maintext h2 {    font-weight: 400;    font-size: 1.7em;    line-height: 1.2em;    text-transform: uppercase;    letter-spacing: .1em;    text-align: center;    color: #FFFFFF;    font-family:'Raleway', sans-serif, Helvetica, Verdana;    padding-bottom: 15px;}main {    max-width: 1180px;    margin: auto;    margin-top: 20px;    overflow: hidden;}.whatwedohd {    text-align: center;    font-weight: 400;    font-size: 1.7em;    line-height: 1.2em;    text-transform: uppercase;    letter-spacing: .1em;    color: #000000;    font-family:'Raleway', sans-serif, Helvetica, Verdana;    -webkit-font-smoothing: antialiased;}.whatwedobox {    width: 30%;    height: 300px;    border: 1px solid blue;    float: left;    margin-right: 5%;    padding: 20px;    margin-top: 20px;}.whatwedobox.three {    margin-right: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>    <nav>        <a class="logo" href="#">Aesthetic</a>        <ul>            <li><a href="#">Home</a></li>            <li><a href="#">About</a></li>            <li><a href="#">Gallery</a></li>            <li><a href="#">Contact</a></li>        </ul>    </nav>    <div class="maintext">         <h1>We're Aesthetic</h1>         <h2>A Visual Agency from Niagara</h2>    </div></header>
<main>    <h2 class="whatwedohd">Expertise</h2>    <div class="whatwedobox one"></div>    <div class="whatwedobox two"></div>    <div class="whatwedobox three"></div></main>
<footer></footer>

---

Related Topics