0
私はナビゲーションバーを持っていて、ページを下にスクロールすると位置が変わりますが、画像をインラインで配置することはできません。画像でナブバーを変形する
イメージを挿入すると、テキストの位置が変わります。私がこれを見てきた最良の例は、増強されたボードのウェブサイトです。 https://boostedboards.com/。私はこのすべてに慣れていないので、例のように見えるようにするヒントは役に立ちます。
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
(function(window) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg(className) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ('classList' in document.documentElement) {
hasClass = function(elem, c) {
return elem.classList.contains(c);
};
addClass = function(elem, c) {
elem.classList.add(c);
};
removeClass = function(elem, c) {
elem.classList.remove(c);
};
}
else {
hasClass = function(elem, c) {
return classReg(c).test(elem.className);
};
addClass = function(elem, c) {
if (!hasClass(elem, c)) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function(elem, c) {
elem.className = elem.className.replace(classReg(c), ' ');
};
}
function toggleClass(elem, c) {
var fn = hasClass(elem, c) ? removeClass : addClass;
fn(elem, c);
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if (typeof define === 'function' && define.amd) {
// AMD
define(classie);
} else {
// browser global
window.classie = classie;
}
})(window);header {
vertical-align:middle;
width: 80%;
height: 100px;
overflow: hidden;
position: fixed;
top: 0;
left: 180px;
z-index: 999;
background-color: #F7F7F7;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
display: inline-block;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav {
vertical-align:middle;
display: inline-block;
float: right;
z-index: 999999999;
padding: 0.75em 0 1 1;
margin: 0 auto;
Padding: 0 ;
height: 60px;
padding-right:280px;}
header nav a {
text-align:center;
vertical-align:middle;
display: inline-block;
line-height: 90px;
margin-left: 20px;
color: #1B1A1A;
font-weight: 700;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
padding-left:20px;
}
header nav a:hover {
opacity: 0.5; }
header.smaller {
height: 75px;
left:0px;
width:100%; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
header.smaller nav a {
line-height: 75px; }<header>
<div class="container clearfix">
<nav>
<img src="logo.png" alt="left" width="75" class="logo">
<a href="Index.html">Home</a>
<a href="About Us.html">About Us</a>
<a href="Gallery.html">Gallery</a>
<a href="#">Contact</a>
<a src="../Proper website/Logo.png" width="75"></a>
</nav>
</div>
</header>