Develop Reference

Make image appear when hovering and dissapear when not

I have a div that I want an image to appear when it is hovered on and disappear when moved to another div (which will show another image instead). I tried to set it to display: none from the css file and show it again in jQuery with display: normal, but it feels wrong and apparently is wrong too, any suggestions on how to make it work?
const imgOne = () => {
$("#img1").css('display', 'normal')
}
$(document).ready(function () {
$(".class4").hover(function() {
$('#banner').css('background', '#3a50d9')
$(".hero-name div").css('color', '#ffffff')
$("#banner h2").css("font-family", 'Codystar, cursive')
$('#banner h2').css('font-size', '6vmin')
$("#banner h2").css("font-weight", "700")
$(".hero-name div").css('text-shadow', '-4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27')
})
$(".class5").hover(function() {
$('#banner').css('background', '#005dff')
$(".hero-name div").css('color', '#ffffff')
$("#banner h2").css("font-size", '4vmin')
$("#banner h2").css("font-family", '\"Press Start 2P\", cursive')
$(".hero-name div").css('text-shadow', '-5px 5px 0px #00e6e6, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd')
// Images
imgOne()
})
}
#img1 {
position: absolute;
left: 41%;
bottom: 60%;
display: none;
}
<!-- Banner Section -->
<section id="banner">
<img id ="img1" src="resources/frozen.svg" alt="pacman" type="png">
<div class="hero-name">
<div class="class1">Y</div>
<div class="class2">O</div>
<div class="class3">U</div>
<div class="class4">R</div>
<div class="class5"></div>
<div class="class6">N</div>
<div class="class7">A</div>
<div class="class8">M</div>
<div class="class9">E</div>
<div class="hero-pro">
<h2>Title Here</h2>
</div>
</div>
An example to clarify: If I hover over the letter "N", an image would appear. When I move to hover to the letter "A", another image would appear and the image that appeared from "N" would disappear.

Im a bit confused at exactly what you want. This may be a case where using :not in CSS will do what you want though. So if I had several images and only wanted the hovered image to be visible I would add
img {
position: absolute;
left: 50%;
top: 20px;
width: 100px;
height: 100px;
opacity: 0;
transition: opacity 0.5s;
}
#backdrop {
position: absolute;
top:0;
width:0;
height: 250px;
z-index:-1;
transition: width .5s;
}
.letters {
width: min-content;
}
h2 {
position: relative;
left: 20px;
}
/*class1 hover effects*/
.class1:hover ~ #img1{
opacity: 1;
}
.class1:hover ~ #backdrop{
width: 100%;
background: #3a50d9;
}
.class1:hover ~ .hero-pro h2, .hero{
font-family: 'Codystar', cursive;
font-size: 30pt;
font-weight: 700;
text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}
/*class2 hover effects*/
.class2:hover ~ #img2{
opacity: 1;
}
.class2:hover ~ #backdrop{
width: 100%;
background: #005dff;
}
.class2:hover ~ .hero-pro h2, .hero{
font-family: 'Press Start 2P', cursive;
font-size: 30pt;
font-weight: 700;
text-shadow: -5px 5px 0px #00e6e6, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd;
}
/*class3 hover effects*/
.class3:hover ~ #img3{
opacity: 1;
}
.class3:hover ~ #backdrop{
width: 100%;
background: yellow;
}
.class3:hover ~ .hero-pro h2, .hero{
font-family: 'Press Start 2P', cursive;
font-size: 30pt;
font-weight: 700;
text-shadow: -5px 5px 0px #00e6e6, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Codystar&display=swap" rel="stylesheet">
<!-- Banner Section -->
<section id="banner">
<div class="hero-name">
<div class="class1 letters">Y</div>
<div class="class2 letters">O</div>
<div class="class3 letters">U</div>
<div class="class4 letters">R</div>
<div class="class5 letters"></div>
<div class="class6 letters">N</div>
<div class="class7 letters">A</div>
<div class="class8 letters">M</div>
<div class="class9 letters">E</div>
<div id="backdrop"></div>
<div class="hero-pro">
<h2>Title Here</h2>
</div>
<img id ="img1" src="https://www.pinclipart.com/picdir/middle/84-849138_gold-chain-gangster-clipart.png" alt="sonic"/>
<img id ="img2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Pac_Man.svg/1200px-Pac_Man.svg.png" alt="pacman"/>
<img id ="img3" src="https://www.clipartmax.com/png/middle/27-279319_donkey-kong-png-photo-donkey-kong-king-of-swing.png" alt="dk"/>
<img id ="img4" src="https://www.vhv.rs/dpng/d/574-5744697_tails-sonic-and-all-stars-racing-transformed-tails.png" alt="tails"/>
</div>

Use opacity so your image retains its dimensions.
#img1 {
position: absolute;
left: 41%;
bottom: 60%;
opacity: 0;
}
#img1:hover {
opacity: 1;
}
<!-- Banner Section -->
<section id="banner">
<img id="img1" src="https://placekitten.com/200/300" alt="pacman" type="png">
<div class="hero-name">
<div class="class1">Y</div>
<div class="class2">O</div>
<div class="class3">U</div>
<div class="class4">R</div>
<div class="class5"></div>
<div class="class6">N</div>
<div class="class7">A</div>
<div class="class8">M</div>
<div class="class9">E</div>
<div class="hero-pro">
<h2>Title Here</h2>
</div>
</div>
</section>

Iterative function to hide/show multiple images with for and if statements

I want to hide and show mulitple images, depending on the input code "places" inside the 'ShowPicture'-function. Please see my full example code below:
<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<style>
body {font-size: 30px; text-align: center; vertical-align: middle}
#containertop {background-color: #808080; width: 100%; position:right}
#parent {display:flex;}
#containercircle {width: 30%;}
#containerimg {background-color: rgba(50,0,50,1);flex:1;}
header, footer {padding: 1em; color: rgba(50,0,50,1);background-color: #808080;clear: left;text-align: center}
#circle {width:100px;float:left;margin:5px; overflow:hidden; height:100px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; background-color:rgba(50,0,50,1); font-size:15px; line-height:100px} #circle:hover{font-size:16.5px;margin:5px;transition: All 0.2s ease-in-out}
.crop {width:40px;height:40px;}
</style>
<script>function ShowPicture(tekst, places){
for (var i = 0, i < places.length; i++) {
var idCust ="pic" + places[i];
var imag = document.getElementById(idCust);
if(imag.style.display === 'block'){
imag.style.display = 'none'; tekst.style.color = '';}
else {
imag.style.display = 'block'; tekst.style.color = 'red';}}}
</script>
</head>
<body>
<header><h1><div id="containertop">header</div></h1></header>
<div id="parent">
<div id ="containercircle" float = "right">
<div id="circle" onclick="ShowPicture(this,1)">Test</div>
</div>
<div id ="containerimg" >
<img id="pic0" class ="crop" src="boor.jpg" style="display:none;"/>
<img id="pic1" class ="crop" src="boor.jpg" style="display:none;"/>
<img id="pic2" class ="crop" src="boor.jpg" style="display:none;"/>
<img id="pic3" class ="crop" src="boor.jpg" style="display:none;"/>
</div>
</div>
<footer><div id="containertop">footer</div></footer>
</body>
</html>
two examples of a "places" code is
"123" and "24"
The function should read off the three numbers separately and hide or show the corresponding "idCust" from the css part. I have made id's in the css that is named "pic1", "pic2", etc.
For some reason, this is not working when I call the "ShowPicture" function after clicking on a div with the "onclick" statement. I got the feeling it has something to do with my for loop.. maybe there is a way to hide/show all together at once, but it should only show the images that correspond to the div I clicked on.

Your problem is that you have an error in your loop the comma in for (var i = 0, i < places.length; i++), should be replaced with a semicolon.
Another thing you were looping on a string and you passed 1 which is a Number so there won't be any loop, you need to pass it as a string in:
onclick="ShowPicture(this,'1')"
Demo:
function ShowPicture(tekst, places) {
for (var i = 0; i < places.length; i++) {
var idCust = "pic" + places[i];
var imag = document.getElementById(idCust);
if (imag) {
if (imag.style.display === 'block') {
imag.style.display = 'none';
tekst.style.color = '';
} else {
imag.style.display = 'block';
tekst.style.color = 'red';
}
}
}
}
body {
font-size: 30px;
text-align: center;
vertical-align: middle
}
#containertop {
background-color: #808080;
width: 100%;
position: right
}
#parent {
display: flex;
}
#containercircle {
width: 30%;
}
#containerimg {
background-color: rgba(50, 0, 50, 1);
flex: 1;
}
header,
footer {
padding: 1em;
color: rgba(50, 0, 50, 1);
background-color: #808080;
clear: left;
text-align: center
}
#circle {
width: 100px;
float: left;
margin: 5px;
overflow: hidden;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: rgba(50, 0, 50, 1);
font-size: 15px;
line-height: 100px
}
#circle:hover {
font-size: 16.5px;
margin: 5px;
transition: All 0.2s ease-in-out
}
.crop {
width: 40px;
height: 40px;
}
<header>
<h1>
<div id="containertop">header</div>
</h1>
</header>
<div id="parent">
<div id="containercircle" float="right">
<div id="circle" onclick="ShowPicture(this,'1')">Test</div>
</div>
<div id="containerimg">
<img id="pic0" class="crop" src="boor.jpg" style="display:none;" />
<img id="pic1" class="crop" src="boor.jpg" style="display:none;" />
<img id="pic2" class="crop" src="boor.jpg" style="display:none;" />
<img id="pic3" class="crop" src="boor.jpg" style="display:none;" />
</div>
</div>

slidetoggle in pure Javascript

As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be completely in pure JavaScript (no jQuery please!). Anyone knows how I can do that.
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
.text1 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
.text2 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text1">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text2">BBB</div>
</a>
</div>
</div>
</div>

Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).
.caption {
height: 250px;
width: 355px;
overflow: hidden;
}
.caption-image {
height: 100%;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
Version with JS sizing:
Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.
var captionSel = document.querySelectorAll('.caption');
for (let i = 0; i < captionSel.length; i++) {
let image = captionSel[i].querySelector(":scope > .caption-image");
let text = captionSel[i].querySelector(":scope > .caption-text");
text.style.width = image.clientWidth - 20 + "px";
captionSel[i].style.height = image.clientHeight + "px";
}
.caption {
overflow: hidden;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>

I'll give it to you even better: No javascript at all!
This is possible with pure CSS:
.tumb-wrapper {
position: relative;
overflow: hidden;
}
.text {
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
position: absolute;
bottom: -30px;
transition: 300ms;
left: 0;
}
.tumb-wrapper:hover .text {
bottom: 28px;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text">BBB</div>
</a>
</div>
</div>
</div>
The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.
You should note however, that ancient IE versions won't be able to use this

I usually do this with only CSS.
Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.
Example of my code:
<div id="thumb_Wrapper">
<div class="_Thumb">
<img src="images/Thumb.jpg" class="Animate_left">
</div>
</div>
The CSS
#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
._Thumb > img:hover{left:-18px; cursor:pointer;}
CSS Animation
.Animate_left{transition:left .3s;}
Now all you have to do is swap out the image.
onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.
You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class.
You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.

How to scroll images without using marquee tag? Javascript,jquery or css anything

<marquee>
<div class="client">
<img src="images/c1.png"/>
</div>
<div class="client">
<img src="images/c2.png"/>
</div>
<div class="client">
<img src="images/c3.png"/>
</div>
<div class="client">
<img src="images/c4.png"/>
</div>
<div class="client">
<img src="images/c5.png"/>
</div
><div class="client">
<img src="images/c6.png"/>
</div
><div class="client">
<img src="images/c7.png"/>
</div>
</marquee>
I wanted to scroll these images without using html's marquee tag...please help me.I have used css keyframes but I didn't get what I wanted. These images are in index page bottom side. This is clients logos scrolling from left to right or right to left....thanks in advance.

/*download .js file from here and include it in ur project */
http://technicalpixel.com/post%20sample%20code/Continous%20Horizontal%20JQuery%20Image%20Marquee/assets/js/crawler.js
<head>
<script src="assets/js/crawler.js" type="text/javascript" ></script>
</head>
/* add id to ur div tag */
<div id="marquee">
<div class="client">
<img src="images/c1.png"/>
</div>
<div class="client">
<img src="images/c2.png"/>
</div>
<div class="client">
<img src="images/c3.png"/>
</div>
<div class="client">
<img src="images/c4.png"/>
</div>
<div class="client">
<img src="images/c5.png"/>
</div
><div class="client">
<img src="images/c6.png"/>
</div
><div class="client">
<img src="images/c7.png"/>
</div>
</div>
/* Add this script in ur project in head tag*/
marqueeInit({
uniqueid: 'marquee',
style: {
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});

Please try this:
<style type="text/css">
/* Make it a marquee */
.marquee {
width: 450px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 50s linear infinite;
}
.marquee:hover {
animation-play-state: paused
}
/* Make it move */
#keyframes marquee {
0% { text-indent: 27.5em }
100% { text-indent: -105em }
}
/* Make it pretty */
.microsoft {
padding-left: 1.5em;
position: relative;
font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
/* ::before was :before before ::before was ::before - kthx */
.microsoft:before, .microsoft::before {
z-index: 2;
content: '';
position: absolute;
top: -1em; left: -1em;
width: .5em; height: .5em;
box-shadow: 1.0em 1.25em 0 #F65314,
1.6em 1.25em 0 #7CBB00,
1.0em 1.85em 0 #00A1F1,
1.6em 1.85em 0 #FFBB00;
}
.microsoft:after, .microsoft::after {
z-index: 1;
content: '';
position: absolute;
top: 0; left: 0;
width: 2em; height: 2em;
background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0));
}
/* Style the links */
.vanity {
color: #333;
text-align: center;
font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a, .microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover, .microsoft a:hover {
color: #F65314;
}
/* Style toggle button */
.toggle {
display: block;
margin: 2em auto;
}
</style>
<p class="microsoft marquee"><img src="https://s-media-cache-ak0.pinimg.com/236x/a2/4b/48/a24b48e465e666fffd4cbcaa79107c7c.jpg" /></p>
<button class="toggle">Toggle Beautification</button>
<script type="application/javascript">
$(".toggle").on("click", function () {
$(".marquee").toggleClass("microsoft");
});
</script>
http://jsfiddle.net/jonathansampson/XxUXD/

Top fixed Menubar, when linked to a certain div of the menu from another html

My problem is that i wanted to make a fixed menubar on top of the page when scrolled, that wasn't so hard, but the hard part for me is that, when i link it to a certain part from the menubar from external html the menubar shows up and it is fixed on the top of the page and it works perfectly when i scroll down, but when i scroll up, it stays there
<!DOCTYPE html>
<html>
<head>
<title>SMINT Demo</title>
<meta name = "keywords" content = "" />
<meta name = "description" content = "" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1 user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<link href="css/demo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smint.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
(function(){
$.fn.smint = function( options ) {
// adding a class to users div
$(this).addClass('smint');
var settings = $.extend({
'scrollSpeed ' : 500
}, options);
return $('.smint a').each( function() {
if ( settings.scrollSpeed ) {
var scrollSpeed = settings.scrollSpeed;
}
///////////////////////////////////
// get initial top offset for the menu
var stickyTop = $('.smint').offset().top;
// check position and make sticky if needed
var stickyMenu = function(){
// current distance top
var scrollTop = $(window).scrollTop();
// if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
if (scrollTop > stickyTop) {
$('.smint').css({ 'position': 'fixed', 'top':0 }).addClass('fxd');
} else {
$('.smint').css({ 'position': 'absolute', 'top':stickyTop }).removeClass('fxd');
}
};
// run function
stickyMenu();
// run function every time you scroll
$(window).scroll(function() {
stickyMenu();
});
///////////////////////////////////////
$(this).on('click', function(e){
// gets the height of the users div. This is used for off-setting the scroll so th emenu doesnt overlap any content in the div they jst scrolled to
var selectorHeight = $('.smint').height();
// stops empty hrefs making the page jump when clicked
e.preventDefault();
// get id pf the button you just clicked
var id = $(this).attr('id');
// gets the distance from top of the div class that matches your button id minus the height of the nav menu. This means the nav wont initially overlap the content.
var goTo = $('div.'+ id).offset().top -selectorHeight;
// Scroll the page to the desired position!
$("html, body").animate({ scrollTop: goTo }, scrollSpeed);
});
});
};
})();
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}
</script>
<style>
* {margin: 0; padding: 0; outline: 0;}
body {
color: #f8e0b3;
font-size: 12px;
background:#f8e0b3;
}
h1, h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin:0 0 15px 0;
}
h1 {
font-size: 36px;
letter-spacing: -2px;
line-height: 100%;
}
h1.title {
font-size: 46px;
font-weight: 700;
color: #f8e0b3;
}
h2 {
font-size: 24px;
}
p {
margin: 0 0 15px 0;
}
.menuBtn {
background: center center no-repeat transparent;
background: #f8e0b3;
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 10px;
}
.clear {
clear: both;
}
.wrap {
/*background:url(../images/bg.png) top left repeat-x;*/
width: 100%;
max-width: 1140px;
min-width: 960px;
z-index: 10;
position: relative;
margin: 0 auto;
padding: 0;
}
.section {
width: 100%;
max-width: 1140px;
min-width: 960px;
z-index: 10;
position: relative;
margin: 0 auto;
padding: 0 0 20px 0;
}
.inner {
width: 960px;
margin: 0 auto;
position: relative;
min-height: 50px;
padding:30px 0;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
padding:30px 0;
}
/* This is the selector i used for my menu, it needs to be set as position:absolute; */
.subMenu {
position: absolute;
top: 400px;
height: 50px;
z-index: 1000;
width: 100%;
max-width: 1140px;
min-width: 960px;
background: #ff0000; /*за главна категория */
}
.subMenu .inner {
padding:0;
font-weight: 400;
}
.subNavBtn {
display: block;
height: 35px;
width: 8%;
float: left;
margin: 0px 0px 0 0;
text-decoration: none;
font-size: 14px;
padding: 15px 2% 0 2%;
text-align: center;
color: #fff;
}
.end {
margin: 0;
}
/* SECTIONS */
.sTop {
min-height: 630px;
background:#f8e0b3;
color:#3d3d3d;
}
.s1 {
min-height: 500px;
background: #f8e0b3;
}
.s2 {
min-height: 500px;
background: #f8e0b3;
}
.s3 {
min-height: 500px;
background: #f8e0b3;
}
.s4 {
min-height: 500px;
background: #f8e0b3;
}
.s5 {
min-height: 500px;
background: #f8e0b3;
}
.s6 {
min-height: 500px;
background: #f8e0b3;
}
.s7 {
min-height: 500px;
background: #f8e0b3;
}
h1.border {
border-style: solid;
border-width: 10px;
border-color: #ff0000;
}
h1 {
text-align: center;
}
p.border {
border-style: solid;
border-width: 10px;
border-color: #ff0000;
}
p {
text-align: center;
}
#largeImgPanel {
text-align: center;
visibility: hidden;
position: fixed;
z-index: 100;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(100,100,100, 0.5);
}
#displayImage{
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="subMenu" >
<div class="inner">
Блузи
Ризи
Сака
Аксесоари
Якета
Панталони/Дънки
Обувки
Спортни стоки
</div>
</div>
<div class="section sTop">
<div class="inner"><img src="heading.jpg" alt="заглавие">
<h1 class="border">Област Пловдив</h1>
<p class="border">Мъжки блузи</p>
</div>
<br class="clear">
</div>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/2.jpg" width="200" height="200" name="show">
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/3.jpg" width="200" height="200" name="show">
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/4.jpg" width="200" height="200" name="show">
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/5.jpg" width="200" height="200" name="show">
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/6.jpg" width="200" height="200" name="show">
<div class="section s1">
<h1 class="border"><font color="black"><a name="mujkirizi">Ризи</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div class="section s2">
<h1 class="border"><font color="black"><a name="mujkisaka">Сака</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div class="section s3">
<h1 class="border"><font color="black"><a name="mujkiaksesoari"> Аксесоари</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div class="section s4">
<h1 class="border"><font color="black"><a name="mujkiiaketa"> Якета</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div class="section s5">
<h1 class="border"><font color="black"><a name="mujkipantaloni"> Панталони/Дънки</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div class="section s6">
<h1 class="border"><font color="black"><a name="mujkiobuvki"> Обувки</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div class="section s7">
<h1 class="border"><font color="black"><a name="mujkisportnistoki"> Спортни стоки</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" style="height: 100%; margin: 0; padding: 0;" />
</div>
</body>
</html>

It works for me, it's fixed when i scroll down, and when i come back on the top of the page it goes where it was at the beginning, i don't get your problem, can you be more specific?

Well, to be more specific, i have the menubar that is fixed when i scroll down or up and it work perfectly when i open this specific html. This menubar contain 7 submenus and my idea is that when i use an external html with link to for example submenu 3 using (it opens this specific html and scroll down to submenu 3)but the menubar doesnt move when i scroll up , it only works(stay fixed at the top)when i scroll down