$(document).ready(function() { $(".hide").click(function() { $(".dropdown").hide(); $(this).hide(); }); $("menu ul li:nth-child(4)").click(function() { $(".dropdown").show(); $(".hide").show(); }); }); (function($) { $.lockfixed("menu", { offset: { top: 0, bottom: 650, opacity: .4 } }); })(jQuery); 
 * { margin: 0; padding: 0; text-decoration: none; list-style: none; } .box { box-sizing: border-box; } html, body { min-height: 1800px; } header { width: 100%; height: 300px; margin: auto; position: relative; } header .header-bg, .header-gradient, .header-basis { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .header-bg { background: url(http://www.tvoishuzy.com/images/new-york-city-H.jpg); background-size: 100% 100%; filter: blur(5px); background-color: #222; } .header-title { margin: 100px; } menu { width: 100%; height: 50px; line-height: 50px; text-align: center; } menu ul li { display: inline-block; height: 30px; padding: 0 20px; line-height: 30px; background: -webkit-linear-gradient(rgba(255, 0, 0, .8) 60%, rgba(255, 55, 255, .7) 100%); border-radius: 4px; position: relative; } menu ul li a { font-family: 'Lobster', cursive; font-size: 20px; font-weight: 800; text-shadow: 0 2px rgba(1, 1, 0, 1); color: #fefefe; } menu ul li div { width: 400px; min-height: 250px; position: absolute; left: 0; top: 33px; background: -webkit-linear-gradient(rgba(255, 0, 0, .8) 60%, rgba(255, 55, 255, .7) 100%); border-radius: 4px; display: none; z-index: 301; } .dublicat { width: 250px; transform: rotateY(180deg); transform: rotateX(-180deg); opacity: .2; font-weight: 900; color: white; text-shadow: 0 0 3px grey; transition: textshadow .3s; } h1.sol::selection, h1.sol i::selection { background: rgba(200, 200, 200, .4); } h1.dublicat::selection, h1.dublicat i::selection { background-color: transparent !important; background: transparent!important; color: transparent; text-shadow: 0 0 3px transparent; } .header-gradient { background: -webkit-linear-gradient(red 100%, green 10%, blue 60%); opacity: .2; } .hide { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; display: ; z-index: 300; } 
 <!--start header--> <header class="box"> <div class="header-bg"></div> <div class="header-gradient"></div> <div class="header-basis"> <div class="header-title"> <h1 class="sol"><i>Group</i>GMS<i>design</i></h1> <h1 class="dublicat"><i>Group</i>GMS<i>design</i></h1> </div> </div> </header> <!--stop header--> <!--start menu--> <menu> <ul> <li><a href="#">Главная</a> </li> <li><a href="#">Гостевая</a> </li> <li><a href="#">Шаблоны</a> </li> <li><a href="#">Работа с CMS</a> <div class="dropdown"> </div> </li> <li><a href="#">О нас</a> </li> </ul> </menu> <div class="hide"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="http://www.directlyrics.com/code/lockfixed/jquery.lockfixed.min.js"></script>

The problem site itself is “Working with CMS” when clicking on this item all content scrolls up, how to fix it? \ Used jquery.scrollfixed.js which fixes the block

1 answer 1

Replace

 <li><a href="#">Работа с CMS</a>

on

 <li><a href="javascript://">Работа с CMS</a> 

  $(document).ready(function() { $(".hide").click(function() { $(".dropdown").hide(); $(this).hide(); }); $("menu ul li:nth-child(4)").click(function() { $(".dropdown").show(); $(".hide").show(); }); }); (function($) { $.lockfixed("menu", { offset: { top: 0, bottom: 650, opacity: .4 } }); })(jQuery); 
 * { margin: 0; padding: 0; text-decoration: none; list-style: none; } .box { box-sizing: border-box; } html, body { min-height: 1800px; } header { width: 100%; height: 300px; margin: auto; position: relative; } header .header-bg, .header-gradient, .header-basis { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .header-bg { background: url(http://www.tvoishuzy.com/images/new-york-city-H.jpg); background-size: 100% 100%; filter: blur(5px); background-color: #222; } .header-title { margin: 100px; } menu { width: 100%; height: 50px; line-height: 50px; text-align: center; } menu ul li { display: inline-block; height: 30px; padding: 0 20px; line-height: 30px; background: -webkit-linear-gradient(rgba(255, 0, 0, .8) 60%, rgba(255, 55, 255, .7) 100%); border-radius: 4px; position: relative; } menu ul li a { font-family: 'Lobster', cursive; font-size: 20px; font-weight: 800; text-shadow: 0 2px rgba(1, 1, 0, 1); color: #fefefe; } menu ul li div { width: 400px; min-height: 250px; position: absolute; left: 0; top: 33px; background: -webkit-linear-gradient(rgba(255, 0, 0, .8) 60%, rgba(255, 55, 255, .7) 100%); border-radius: 4px; display: none; z-index: 301; } .dublicat { width: 250px; transform: rotateY(180deg); transform: rotateX(-180deg); opacity: .2; font-weight: 900; color: white; text-shadow: 0 0 3px grey; transition: textshadow .3s; } h1.sol::selection, h1.sol i::selection { background: rgba(200, 200, 200, .4); } h1.dublicat::selection, h1.dublicat i::selection { background-color: transparent !important; background: transparent!important; color: transparent; text-shadow: 0 0 3px transparent; } .header-gradient { background: -webkit-linear-gradient(red 100%, green 10%, blue 60%); opacity: .2; } .hide { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; display: ; z-index: 300; } 
 <!--start header--> <header class="box"> <div class="header-bg"></div> <div class="header-gradient"></div> <div class="header-basis"> <div class="header-title"> <h1 class="sol"><i>Group</i>GMS<i>design</i></h1> <h1 class="dublicat"><i>Group</i>GMS<i>design</i></h1> </div> </div> </header> <!--stop header--> <!--start menu--> <menu> <ul> <li><a href="#">Главная</a> </li> <li><a href="#">Гостевая</a> </li> <li><a href="#">Шаблоны</a> </li> <li><a href="javascript://">Работа с CMS</a> <div class="dropdown"> </div> </li> <li><a href="#">О нас</a> </li> </ul> </menu> <div class="hide"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="http://www.directlyrics.com/code/lockfixed/jquery.lockfixed.min.js"></script>

  • constantly forget about it! ATP - user33274