Question

这是一个简单的问题，但我对答案不太确定。

我们可以隐藏div而内容仍然可见吗？

因为我正在处理这个

的事情

#navigation{
   position:fixed;
   height: 50px;
}
div#slider{
    background:#ccc;
    height:400px;
    position:static;}
.invi{
    background:#000;
    position:relative;
    visibility:hidden;
    height:50px;}
.insideinvi{
    position:absolute;
    display:block;
    height:10px;
    }

＆＃13;

$(".skippage").click(function() {
    $('html, body').animate({
        scrollTop: $("#content").offset().top
    }, 300);
});
// Hide Header on on scroll down

(function($) {

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        breakpoint: 768,
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.find('li ul').parent().addClass('has-sub');
        if (settings.format != 'select') {
          cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) { 
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });

          multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };

          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
        }

        else if (settings.format === 'select')
        {
          cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
          var selectList = cssmenu.find('select');
          selectList.append('<option>' + settings.title + '</option>', {
                                                         "selected": "selected",
                                                         "value": ""});
          cssmenu.find('a').each(function() {
            var element = $(this), indentation = "";
            for (i = 1; i < element.parents('ul').length; i++)
            {
              indentation += '-';
            }
            selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
          });
          selectList.on('change', function() {
            window.location = $(this).find("option:selected").val();
          });
        }

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($(window).width() > settings.breakpoint) {
            cssmenu.find('ul').show();
            cssmenu.removeClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').hide();
            }
            else {
              cssmenu.find("#menu-button").removeClass("menu-opened");
            }
          }

          if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
            cssmenu.find('ul').hide().removeClass('open');
            cssmenu.addClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').show();
            }
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$(document).ready(function() {
  $("#cssmenu").menumaker({
    title: "Menu",
    format: "dropdown"
  });

  $("#cssmenu a").each(function() {
  	var linkTitle = $(this).text();
  	$(this).attr('data-title', linkTitle);
  });
});

});
})(jQuery);

＆＃13;

html,body{
	width:100%;
	height:100%;
	padding:0;
	margin:0;}
	
.IndexSection{
	font-size:2em;
	color:#ccc;
	width:100%;
}
	
div#welcome {
	height: 100vh;
	background: white;
	text-align:center;
	margin:0;
	position:relative;
}
.welcometext{
	background-color:red;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	height:70%;
	width:80%;
	float:none;
	margin:0 auto;
	text-align:center;
	position:absolute;
}
.skippage{
font-size:12px;
color:red;
	position:absolute;
	bottom:2%;
	left:50%;
	transform:translate(-50%,-2%);
}
header.navigation{
	position:fixed;
	background:#9C0;
	font-size:12px;
	height:50px;
	left: 0;
        right: 0;
        top: 0;	
	} 
div#content {
	padding-top:50px;
	height: 2000px;
	background: yellow;
}

div#slider{
	background:#ccc;
	height:400px;
	position:static;}
.invi{
	background:#000;
	position:relative;
	visibility:hidden;
	height:50px;}
.insideinvi{
	position:absolute;
	display:block;
	height:10px;
	}


@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu > ul {
  background: #3db2e1;
}
#cssmenu > ul > li {

  text-align:center;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #3db2e1;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
  color: red;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #ccc;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #dff2fa;
  background: #19799f;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
  background: red;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #3db2e1;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #dff2fa;
  border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #dff2fa;
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Home</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="style/bootstrap/css/bootstrap.min.css">
    <!-- custom -->
    <link rel="stylesheet" type="text/css" href="style/navigation.css">

    <link rel="stylesheet" type="text/css" href="style/main.css">

  </head>
<body>
            <header class="navigation nav-down">
<div id='cssmenu' class="row">
<ul class="form-group">
   <li class='active col-lg-2 col-sm-12'><a href='#'>Home</a></li>
   <li class="col-lg-2 col-sm-12"><a href='#'>Products</a></li>
   <li class="col-lg-2 col-sm-12"><a href='#'>3</a></li>
   <li class="col-lg-2 col-sm-12"><a href='#'>4</a></li>
   <li class="col-lg-2 col-sm-12"><a href='#'>5</a></li>
   <li class="col-lg-2 col-sm-12"><a href='#'>6</a></li>
</ul>
</div>
            </header>

<div id="welcome" class="IndexSection row">
            <div class=" welcometext">
            welcome
            </div>
    <a href="#" class="skippage">Go Down</a>
</div>
<div id="content">
    <div id="slider" class="col-xs-12">
			
<div class="invi">
	<div class="insideinvi">2</div>
	<div class="insideinvi">3</div>
</div>
      slider
    </div>
Content
</div>
</body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="style/bootstrap/js/bootstrap.min.js"></script>
    <!-- custom -->
    <script src="style/main.js"></script>
     <script src="style/navigation.js"></script>
     
</html>

＆＃13;

固定导航和需要作为相对位置的内容，因为嵌套div将是设置适当位置的绝对位置。那可能吗？或者其他一些线索？

将#invi更改为亲戚，并将.insideinvi的位置设置到一个地方而不会让导航失误。那可能吗？

Answer 1

父母visibility:hidden和子visibility:visible

可以

父母visibility:hidden和孩子display:block不是明确的解决方案，我不应该工作。

（也许）更好的解决方案是制作一个没有背景的div - 所以你不必让他隐藏

导航栏具有固定位置和具有相对位置的内容

1 个答案: