Java Script to change Nav Bar text to image on scroll
up vote
0
down vote
favorite
Hi I have the following code for a website which currently displays the text "Prince Resourcing" in the Nav Bar. When the user scrolls, the colours of the Nav Bar change, but what I really want is to replace the "Prince Resourcing" text with a thumbnail image I have created. I can't seem to get it to work, can anyone help? Thanks.
creative.js code
(function($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function()
if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname)
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length)
$('html, body').animate(
scrollTop: (target.offset().top - 56)
, 1000, "easeInOutExpo");
return false;
);
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function()
$('.navbar-collapse').collapse('hide');
);
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy(
target: '#mainNav',
offset: 57
);
// Collapse Navbar
var navbarCollapse = function()
if ($("#mainNav").offset().top > 100)
$("#mainNav").addClass("navbar-shrink");
else
$("#mainNav").removeClass("navbar-shrink");
;
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);
index.html code
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top" >Prince Resourcing</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Current Roles</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="gdpr.html">GDPR</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="team.html">The Team</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
javascript html html5 frontend
asked Nov 10 at 10:17
SDROB
408
add a comment |
up vote
0
down vote
favorite
Hi I have the following code for a website which currently displays the text "Prince Resourcing" in the Nav Bar. When the user scrolls, the colours of the Nav Bar change, but what I really want is to replace the "Prince Resourcing" text with a thumbnail image I have created. I can't seem to get it to work, can anyone help? Thanks.
creative.js code
(function($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function()
if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname)
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length)
$('html, body').animate(
scrollTop: (target.offset().top - 56)
, 1000, "easeInOutExpo");
return false;
);
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function()
$('.navbar-collapse').collapse('hide');
);
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy(
target: '#mainNav',
offset: 57
);
// Collapse Navbar
var navbarCollapse = function()
if ($("#mainNav").offset().top > 100)
$("#mainNav").addClass("navbar-shrink");
else
$("#mainNav").removeClass("navbar-shrink");
;
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);
index.html code
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top" >Prince Resourcing</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Current Roles</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="gdpr.html">GDPR</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="team.html">The Team</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
javascript html html5 frontend
asked Nov 10 at 10:17
SDROB
408
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Hi I have the following code for a website which currently displays the text "Prince Resourcing" in the Nav Bar. When the user scrolls, the colours of the Nav Bar change, but what I really want is to replace the "Prince Resourcing" text with a thumbnail image I have created. I can't seem to get it to work, can anyone help? Thanks.
creative.js code
(function($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function()
if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname)
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length)
$('html, body').animate(
scrollTop: (target.offset().top - 56)
, 1000, "easeInOutExpo");
return false;
);
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function()
$('.navbar-collapse').collapse('hide');
);
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy(
target: '#mainNav',
offset: 57
);
// Collapse Navbar
var navbarCollapse = function()
if ($("#mainNav").offset().top > 100)
$("#mainNav").addClass("navbar-shrink");
else
$("#mainNav").removeClass("navbar-shrink");
;
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);
index.html code
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top" >Prince Resourcing</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Current Roles</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="gdpr.html">GDPR</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="team.html">The Team</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
javascript html html5 frontend
asked Nov 10 at 10:17
SDROB
408
Hi I have the following code for a website which currently displays the text "Prince Resourcing" in the Nav Bar. When the user scrolls, the colours of the Nav Bar change, but what I really want is to replace the "Prince Resourcing" text with a thumbnail image I have created. I can't seem to get it to work, can anyone help? Thanks.
creative.js code
(function($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function()
if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname)
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length)
$('html, body').animate(
scrollTop: (target.offset().top - 56)
, 1000, "easeInOutExpo");
return false;
);
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function()
$('.navbar-collapse').collapse('hide');
);
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy(
target: '#mainNav',
offset: 57
);
// Collapse Navbar
var navbarCollapse = function()
if ($("#mainNav").offset().top > 100)
$("#mainNav").addClass("navbar-shrink");
else
$("#mainNav").removeClass("navbar-shrink");
;
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);
index.html code
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top" >Prince Resourcing</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Current Roles</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="gdpr.html">GDPR</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="team.html">The Team</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
javascript html html5 frontend
javascript html html5 frontend
asked Nov 10 at 10:17
SDROB
408
asked Nov 10 at 10:17
SDROB
408
asked Nov 10 at 10:17
SDROB
408
asked Nov 10 at 10:17
SDROB
408
asked Nov 10 at 10:17
SDROB
408
408
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
You can inline:
var navbarCollapse = function()
if ($("#mainNav").offset().top > 100)
$("#mainNav").addClass("navbar-shrink");
$(".navbar-brand").html('<img src="/relative/path/to/image.png" />');
else
$("#mainNav").removeClass("navbar-shrink");
$(".navbar-brand").html('Prince Resourcing');
;
It would be preferential to use jQuery's addCLass however" $(".navbar-brand").addClass("YourImageClass");
answered Nov 10 at 13:21
Jamie_D
39428
This solution doesn't seem to work.. even if I replace the line containing the image source with ` $(".navbar-brand").html('TEST');` the output does not seem to change. Any ideas?
– SDROB
Nov 12 at 11:08
This solution depends on what the navbar-shrink class is up to. Please post a snippet of the CSS that contains both navbar-shrink and navbar-brand
– Jamie_D
Nov 12 at 11:14
Sorry scratch that, works good - thanks!
– SDROB
Nov 12 at 11:27
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
You can inline:
var navbarCollapse = function()
if ($("#mainNav").offset().top > 100)
$("#mainNav").addClass("navbar-shrink");
$(".navbar-brand").html('<img src="/relative/path/to/image.png" />');
else
$("#mainNav").removeClass("navbar-shrink");
$(".navbar-brand").html('Prince Resourcing');
;
It would be preferential to use jQuery's addCLass however" $(".navbar-brand").addClass("YourImageClass");
answered Nov 10 at 13:21
Jamie_D
39428
This solution doesn't seem to work.. even if I replace the line containing the image source with ` $(".navbar-brand").html('TEST');` the output does not seem to change. Any ideas?
– SDROB
Nov 12 at 11:08
This solution depends on what the navbar-shrink class is up to. Please post a snippet of the CSS that contains both navbar-shrink and navbar-brand
– Jamie_D
Nov 12 at 11:14
Sorry scratch that, works good - thanks!
– SDROB
Nov 12 at 11:27
add a comment |
up vote
0
down vote
accepted
You can inline:
var navbarCollapse = function()
if ($("#mainNav").offset().top > 100)
$("#mainNav").addClass("navbar-shrink");
$(".navbar-brand").html('<img src="/relative/path/to/image.png" />');
else
$("#mainNav").removeClass("navbar-shrink");
$(".navbar-brand").html('Prince Resourcing');
;
It would be preferential to use jQuery's addCLass however" $(".navbar-brand").addClass("YourImageClass");
answered Nov 10 at 13:21
Jamie_D
39428
This solution doesn't seem to work.. even if I replace the line containing the image source with ` $(".navbar-brand").html('TEST');` the output does not seem to change. Any ideas?
– SDROB
Nov 12 at 11:08
This solution depends on what the navbar-shrink class is up to. Please post a snippet of the CSS that contains both navbar-shrink and navbar-brand
– Jamie_D
Nov 12 at 11:14
Sorry scratch that, works good - thanks!
– SDROB
Nov 12 at 11:27
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
You can inline:
var navbarCollapse = function()
if ($("#mainNav").offset().top > 100)
$("#mainNav").addClass("navbar-shrink");
$(".navbar-brand").html('<img src="/relative/path/to/image.png" />');
else
$("#mainNav").removeClass("navbar-shrink");
$(".navbar-brand").html('Prince Resourcing');
;
It would be preferential to use jQuery's addCLass however" $(".navbar-brand").addClass("YourImageClass");
answered Nov 10 at 13:21
Jamie_D
39428
You can inline:
var navbarCollapse = function()
if ($("#mainNav").offset().top > 100)
$("#mainNav").addClass("navbar-shrink");
$(".navbar-brand").html('<img src="/relative/path/to/image.png" />');
else
$("#mainNav").removeClass("navbar-shrink");
$(".navbar-brand").html('Prince Resourcing');
;
It would be preferential to use jQuery's addCLass however" $(".navbar-brand").addClass("YourImageClass");
answered Nov 10 at 13:21
Jamie_D
39428
answered Nov 10 at 13:21
Jamie_D
39428
answered Nov 10 at 13:21
Jamie_D
39428
answered Nov 10 at 13:21
Jamie_D
39428
39428
This solution doesn't seem to work.. even if I replace the line containing the image source with ` $(".navbar-brand").html('TEST');` the output does not seem to change. Any ideas?
– SDROB
Nov 12 at 11:08
This solution depends on what the navbar-shrink class is up to. Please post a snippet of the CSS that contains both navbar-shrink and navbar-brand
– Jamie_D
Nov 12 at 11:14
Sorry scratch that, works good - thanks!
– SDROB
Nov 12 at 11:27
add a comment |
This solution doesn't seem to work.. even if I replace the line containing the image source with ` $(".navbar-brand").html('TEST');` the output does not seem to change. Any ideas?
– SDROB
Nov 12 at 11:08
This solution depends on what the navbar-shrink class is up to. Please post a snippet of the CSS that contains both navbar-shrink and navbar-brand
– Jamie_D
Nov 12 at 11:14
Sorry scratch that, works good - thanks!
– SDROB
Nov 12 at 11:27
This solution doesn't seem to work.. even if I replace the line containing the image source with ` $(".navbar-brand").html('TEST');` the output does not seem to change. Any ideas?
– SDROB
Nov 12 at 11:08
This solution doesn't seem to work.. even if I replace the line containing the image source with ` $(".navbar-brand").html('TEST');` the output does not seem to change. Any ideas?
– SDROB
Nov 12 at 11:08
This solution depends on what the navbar-shrink class is up to. Please post a snippet of the CSS that contains both navbar-shrink and navbar-brand
– Jamie_D
Nov 12 at 11:14
This solution depends on what the navbar-shrink class is up to. Please post a snippet of the CSS that contains both navbar-shrink and navbar-brand
– Jamie_D
Nov 12 at 11:14
Sorry scratch that, works good - thanks!
– SDROB
Nov 12 at 11:27
Sorry scratch that, works good - thanks!
– SDROB
Nov 12 at 11:27
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237953%2fjava-script-to-change-nav-bar-text-to-image-on-scroll%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
