Need to shrink logo image inside a division while scrolling down on a page
1
I am creating a logo division for a website, however I can't seem to get this to work. I want the logo to shrink as you scroll down on the site and to regain its initial position when scroll up to top. I've tried a few javascript/jQuery functions but its not working. This is the current function i've played with and it doesn't seem to like it. How do I fix it?
HTML:
<body>
<script type="text/javascript">
$(document).on('scroll', function() {
if ($(document).scrollTop() >= 10) {
$('.logo1 img').css('width', '50px');
} else {
$('.logo1 img').css('width', '');
}
});
</script>
<div id="layout">
<header id="header" class="header-v1">
<nav class="flat-mega-menu">
<ul class="collapse">
<li class="title">
<div class="nav1">
<div class="logo1">
<a href="index.html">
<img src="img/weblogo.png" alt="">
</a>
</div>
</div>
</li>
<li><a href="index.html">HOME</a></li>
<li> <a href="template-about-2.html">ABOUT US</a></li>
</ul>
</nav>
</header>
</div>
</body>
CSS:
.nav1 {
position: fixed top: 0;
z-index: 1;
width: 100%;
}
.nav1 .logo1 {
position: fixed;
text-align: left;
z-index: 2;
top: 0;
overflow: hidden;
}
javascript jquery html css image-resizing
asked Nov 16 '18 at 8:18
rrahulrrahul
137
add a comment |
1
I am creating a logo division for a website, however I can't seem to get this to work. I want the logo to shrink as you scroll down on the site and to regain its initial position when scroll up to top. I've tried a few javascript/jQuery functions but its not working. This is the current function i've played with and it doesn't seem to like it. How do I fix it?
HTML:
<body>
<script type="text/javascript">
$(document).on('scroll', function() {
if ($(document).scrollTop() >= 10) {
$('.logo1 img').css('width', '50px');
} else {
$('.logo1 img').css('width', '');
}
});
</script>
<div id="layout">
<header id="header" class="header-v1">
<nav class="flat-mega-menu">
<ul class="collapse">
<li class="title">
<div class="nav1">
<div class="logo1">
<a href="index.html">
<img src="img/weblogo.png" alt="">
</a>
</div>
</div>
</li>
<li><a href="index.html">HOME</a></li>
<li> <a href="template-about-2.html">ABOUT US</a></li>
</ul>
</nav>
</header>
</div>
</body>
CSS:
.nav1 {
position: fixed top: 0;
z-index: 1;
width: 100%;
}
.nav1 .logo1 {
position: fixed;
text-align: left;
z-index: 2;
top: 0;
overflow: hidden;
}
javascript jquery html css image-resizing
asked Nov 16 '18 at 8:18
rrahulrrahul
137
Hello and welcome to SO! Can you be a bit clearer than "they don't want to cooperate"? What does your code do that wasn't expected? any error? what happens that we need to fix?
– Kaddath
Nov 16 '18 at 8:26
One thing I can see is.logo1 imgmight want to be.logo1 a imgdepending on a few things.
– Jack Bashford
Nov 16 '18 at 8:27
thank you so much for helping
– rrahul
Nov 16 '18 at 10:41
add a comment |
1
1
1
I am creating a logo division for a website, however I can't seem to get this to work. I want the logo to shrink as you scroll down on the site and to regain its initial position when scroll up to top. I've tried a few javascript/jQuery functions but its not working. This is the current function i've played with and it doesn't seem to like it. How do I fix it?
HTML:
<body>
<script type="text/javascript">
$(document).on('scroll', function() {
if ($(document).scrollTop() >= 10) {
$('.logo1 img').css('width', '50px');
} else {
$('.logo1 img').css('width', '');
}
});
</script>
<div id="layout">
<header id="header" class="header-v1">
<nav class="flat-mega-menu">
<ul class="collapse">
<li class="title">
<div class="nav1">
<div class="logo1">
<a href="index.html">
<img src="img/weblogo.png" alt="">
</a>
</div>
</div>
</li>
<li><a href="index.html">HOME</a></li>
<li> <a href="template-about-2.html">ABOUT US</a></li>
</ul>
</nav>
</header>
</div>
</body>
CSS:
.nav1 {
position: fixed top: 0;
z-index: 1;
width: 100%;
}
.nav1 .logo1 {
position: fixed;
text-align: left;
z-index: 2;
top: 0;
overflow: hidden;
}
javascript jquery html css image-resizing
asked Nov 16 '18 at 8:18
rrahulrrahul
137
I am creating a logo division for a website, however I can't seem to get this to work. I want the logo to shrink as you scroll down on the site and to regain its initial position when scroll up to top. I've tried a few javascript/jQuery functions but its not working. This is the current function i've played with and it doesn't seem to like it. How do I fix it?
HTML:
<body>
<script type="text/javascript">
$(document).on('scroll', function() {
if ($(document).scrollTop() >= 10) {
$('.logo1 img').css('width', '50px');
} else {
$('.logo1 img').css('width', '');
}
});
</script>
<div id="layout">
<header id="header" class="header-v1">
<nav class="flat-mega-menu">
<ul class="collapse">
<li class="title">
<div class="nav1">
<div class="logo1">
<a href="index.html">
<img src="img/weblogo.png" alt="">
</a>
</div>
</div>
</li>
<li><a href="index.html">HOME</a></li>
<li> <a href="template-about-2.html">ABOUT US</a></li>
</ul>
</nav>
</header>
</div>
</body>
CSS:
.nav1 {
position: fixed top: 0;
z-index: 1;
width: 100%;
}
.nav1 .logo1 {
position: fixed;
text-align: left;
z-index: 2;
top: 0;
overflow: hidden;
}
javascript jquery html css image-resizing
javascript jquery html css image-resizing
asked Nov 16 '18 at 8:18
rrahulrrahul
137
asked Nov 16 '18 at 8:18
rrahulrrahul
137
edited Nov 16 '18 at 8:47
rrahul
asked Nov 16 '18 at 8:18
rrahulrrahul
137
asked Nov 16 '18 at 8:18
rrahulrrahul
137
asked Nov 16 '18 at 8:18
rrahulrrahul
137
137
Hello and welcome to SO! Can you be a bit clearer than "they don't want to cooperate"? What does your code do that wasn't expected? any error? what happens that we need to fix?
– Kaddath
Nov 16 '18 at 8:26
One thing I can see is.logo1 imgmight want to be.logo1 a imgdepending on a few things.
– Jack Bashford
Nov 16 '18 at 8:27
thank you so much for helping
– rrahul
Nov 16 '18 at 10:41
add a comment |
Hello and welcome to SO! Can you be a bit clearer than "they don't want to cooperate"? What does your code do that wasn't expected? any error? what happens that we need to fix?
– Kaddath
Nov 16 '18 at 8:26
One thing I can see is.logo1 imgmight want to be.logo1 a imgdepending on a few things.
– Jack Bashford
Nov 16 '18 at 8:27
thank you so much for helping
– rrahul
Nov 16 '18 at 10:41
Hello and welcome to SO! Can you be a bit clearer than "they don't want to cooperate"? What does your code do that wasn't expected? any error? what happens that we need to fix?
– Kaddath
Nov 16 '18 at 8:26
Hello and welcome to SO! Can you be a bit clearer than "they don't want to cooperate"? What does your code do that wasn't expected? any error? what happens that we need to fix?
– Kaddath
Nov 16 '18 at 8:26
One thing I can see is
.logo1 img might want to be .logo1 a img depending on a few things.– Jack Bashford
Nov 16 '18 at 8:27
One thing I can see is
.logo1 img might want to be .logo1 a img depending on a few things.– Jack Bashford
Nov 16 '18 at 8:27
thank you so much for helping
– rrahul
Nov 16 '18 at 10:41
thank you so much for helping
– rrahul
Nov 16 '18 at 10:41
add a comment |
1 Answer
1
active
oldest
votes
0
You seem to miss a semicolon in your CSS:
.nav1 {
position: fixed; <-- here
top: 0;
z-index: 1;
width: 100%;
}
Otherwise it seems to work as it should, check this fiddle
answered Nov 16 '18 at 8:32
McVencoMcVenco
1,00011629
McVenco thank you so much for your quick reply. Its worked. thank a lot.
– rrahul
Nov 16 '18 at 10:40
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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%2f53333889%2fneed-to-shrink-logo-image-inside-a-division-while-scrolling-down-on-a-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You seem to miss a semicolon in your CSS:
.nav1 {
position: fixed; <-- here
top: 0;
z-index: 1;
width: 100%;
}
Otherwise it seems to work as it should, check this fiddle
answered Nov 16 '18 at 8:32
McVencoMcVenco
1,00011629
McVenco thank you so much for your quick reply. Its worked. thank a lot.
– rrahul
Nov 16 '18 at 10:40
add a comment |
0
You seem to miss a semicolon in your CSS:
.nav1 {
position: fixed; <-- here
top: 0;
z-index: 1;
width: 100%;
}
Otherwise it seems to work as it should, check this fiddle
answered Nov 16 '18 at 8:32
McVencoMcVenco
1,00011629
McVenco thank you so much for your quick reply. Its worked. thank a lot.
– rrahul
Nov 16 '18 at 10:40
add a comment |
0
0
0
You seem to miss a semicolon in your CSS:
.nav1 {
position: fixed; <-- here
top: 0;
z-index: 1;
width: 100%;
}
Otherwise it seems to work as it should, check this fiddle
answered Nov 16 '18 at 8:32
McVencoMcVenco
1,00011629
You seem to miss a semicolon in your CSS:
.nav1 {
position: fixed; <-- here
top: 0;
z-index: 1;
width: 100%;
}
Otherwise it seems to work as it should, check this fiddle
answered Nov 16 '18 at 8:32
McVencoMcVenco
1,00011629
answered Nov 16 '18 at 8:32
McVencoMcVenco
1,00011629
answered Nov 16 '18 at 8:32
McVencoMcVenco
1,00011629
answered Nov 16 '18 at 8:32
McVencoMcVenco
1,00011629
1,00011629
McVenco thank you so much for your quick reply. Its worked. thank a lot.
– rrahul
Nov 16 '18 at 10:40
add a comment |
McVenco thank you so much for your quick reply. Its worked. thank a lot.
– rrahul
Nov 16 '18 at 10:40
McVenco thank you so much for your quick reply. Its worked. thank a lot.
– rrahul
Nov 16 '18 at 10:40
McVenco thank you so much for your quick reply. Its worked. thank a lot.
– rrahul
Nov 16 '18 at 10:40
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.
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%2f53333889%2fneed-to-shrink-logo-image-inside-a-division-while-scrolling-down-on-a-page%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
Hello and welcome to SO! Can you be a bit clearer than "they don't want to cooperate"? What does your code do that wasn't expected? any error? what happens that we need to fix?
– Kaddath
Nov 16 '18 at 8:26
One thing I can see is
.logo1 imgmight want to be.logo1 a imgdepending on a few things.– Jack Bashford
Nov 16 '18 at 8:27
thank you so much for helping
– rrahul
Nov 16 '18 at 10:41