Javascript 如何在jquery中创建异常以显示元素？_Javascript_Jquery_Html_Twitter Bootstrap

Javascript 如何在jquery中创建异常以显示元素？

javascript jquery html twitter-bootstrap

Javascript 如何在jquery中创建异常以显示元素？,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我有一个scrolltop方法，可以在滚动到某个点时隐藏/显示我的站点徽标。当滚动过标题时，我的导航栏会粘在屏幕上。当滚动超过某个点时，标题将成为菜单徽标问题是，我已经隐藏了手机的标题，所以在我向下滚动到页面的一半之前，徽标不会出现在菜单中对于特定的窗口大小，如何破例在菜单中不断显示徽标？即平板电脑/手机 $(window).scroll(function() { if ($(this).scrollTop()>275) {

我有一个scrolltop方法，可以在滚动到某个点时隐藏/显示我的站点徽标。当滚动过标题时，我的导航栏会粘在屏幕上。当滚动超过某个点时，标题将成为菜单徽标

问题是，我已经隐藏了手机的标题，所以在我向下滚动到页面的一半之前，徽标不会出现在菜单中

对于特定的窗口大小，如何破例在菜单中不断显示徽标？即平板电脑/手机

$(window).scroll(function() {

        if ($(this).scrollTop()>275)
         {
            $('.navbar-left').fadeIn();
         }
        else
         {
          $('.navbar-left').fadeOut();
         }
     });

HTML:

老实说，我并没有阅读你得到的每一行代码，但它看起来像是

navbar fixed

控制着样式，你所需要做的就是为

width>xxx

定义这个类，其中xxx是你的平板电脑尺寸的截止值。因此，在

width

中，类根本不做任何事情。或者以不同的方式定义它，以便显示您需要的内容问题是我没有编写javascript。如何仅以特定的宽度呈现javascript文件？我的评论是针对CSS而不是js的，宽度检查只是一个媒体查询。这意味着，该类将像以前一样被添加，但只要您相应地定义css类，那么一切都应该工作，但在javascript文件中，我已经在卷轴上的某个点隐藏/显示了我的网站徽标。我希望当浏览器的宽度与手机/平板电脑一样大时，这种情况会发生变化。
<!DOCTYPE html>
<html lang="en">
  <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>Arabella Hill</title>
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <!-- Bootstrap -->
    <script type="text/javascript" src="js/logo.js"></script>
    <script type="text/javascript" src="js/scroll.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="https://use.fontawesome.com/9be29f1b6e.js"></script>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

<div class="container-fluid" id="header">
   <div class="page-header" class="img-responsive" id="main-logo">
      <img src="img/arabella.jpg" class="img-responsive">
   </div>
</div>
<nav class="navbar navbar-default" role="navigation" id="nav">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
     <a href="#" class="navbar-left"><img src="img/arabelltest.jpg"></a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Projects</li>
            <li><a href="#">Services</li>
            <li><a href="#">About</li>
            <li><a href="#">Contact</li>
        </ul>
    </div>
  </div>
</nav>
<div class="container-fluid">
 <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

  <div class="carousel-inner">
        <div class="item active">
            <img src="img/forest.jpg" alt="forest" class="img-responsive">
        </div>
        <div class="item">
            <img src="img/snowtiger.jpg" alt="meow" class="img-responsive">
        </div>
        <div class="item">
            <img src="img/tiger.jpg" alt="meowwww!" class="img-responsive">
        </div>
     </div>
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
     <a class="carousel-control right" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
     </a>
 </div>
</div>

<div id="first-section" class="jumbotron">
    <div class="row">
        <div class="col-sm-4">
            <img src="img/forestbeautiful.jpg" class="img-responsive">
        </div>
         <div class="col-sm-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
         <div class="col-sm-4">
            <img src="img/beautiful.jpg" class="img-responsive">
        </div>
    </div>
</div>

<div id="second-section" class="jumbotron">
   <div class="container">
      <br >
        <p class="text-center">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula.

                Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis.

                Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar.

        </p>
    </div>
</div>

<section class="module parallax parallax-1">
  <div class="container">
    <h1>Services</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum Dolor</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit vitae purus quis imperdiet. Aenean elementum porta erat, at posuere est elementum non. Sed ut lorem eu ante ornare tristique quis eu odio. Proin nibh ligula, semper eget mauris nec, egestas mattis libero. Vestibulum auctor tellus vel augue rutrum lacinia. Nunc nec felis velit. Nulla augue magna, vehicula in convallis sed, pretium nec odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis a mauris vestibulum, ornare elit ac, consectetur sem. Pellentesque sem neque, ultricies nec lobortis eget, pellentesque nec lorem. Phasellus feugiat varius nisl, vel efficitur eros ultrices et. Sed sollicitudin, massa sit amet finibus eleifend, leo magna rhoncus sem, suscipit lacinia nulla mauris nec nibh. Aliquam ut massa id justo ullamcorper dictum vel rhoncus urna.

                </p>
  </div>
</section>
</div>


<section class="module parallax parallax-2">
  <div class="container" class="img-responsive">
    <h1>Gardens</h1>
  </div>
</section>

<div class="container" id="gallery-container">
  <div class="row" id="gallery-row">
    <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
      <img src="img/decking.jpg">
  </div>
    <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
      <img src="img/decking.jpg">
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
      <img src="img/decking.jpg">
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4" >
      <img src="img/decking.jpg">
  </div>
    <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
      <img src="img/decking.jpg">
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
      <img src="img/decking.jpg">
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
      <img src="img/decking.jpg">
  </div>
    <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
      <img src="img/decking.jpg">
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
      <img src="img/decking.jpg">
    </div>
  </div>
</div>
</section>

<div class="content">
</div>
    <footer id="myFooter">
        <div class="container">
        <p class="footer-copyright">© 2017 Copyright Text</p>
        </div>
        <div class="footer-social">
            <a href="#" class="social-icons"><i class="fa fa-facebook"></i></a>
            <a href="#" class="social-icons"><i class="fa fa-google-plus"></i></a>
            <a href="#" class="social-icons"><i class="fa fa-twitter"></i></a>
        </div>




    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

.navbar-default

{background-color: #fbfbfb;margin-bottom: 0px;}

.navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: 100%;
}

#brandlogo {
  max-height: 100%;
  max-width: 100%;
  height: 50%;
  width: 50%;
}
.page-header {

  max-width: 100%;
  max-height: 100%;
}


body {
    overflow-x: hidden !important;
}
.container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

.navbar-nav > li {
    display: inline-block;
    float:none;
}


.img-responsive {

  max-width: 40%;
  margin-right: 50px;
}

.jumbotron {
  background-color: white;
}

.jumbotron img{
    display:block;
    margin-left:auto;
    margin-right:auto;

}

.navbar {


}

.scroll-top {
   position:fixed;
   bottom:0;
   right:6%;
   z-index:100;
   background: #f2f3f2;
   font-size:24px;
   border-top-left-radius:3px;
   border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
  color:#222;
} 

.navbar-nav {margin-left: 50px;margin-top: -5px;}

#main-logo > img {

  margin: auto;
}
#test {

  margin-left: auto;
  margin-right: auto;
}

.col-lg-12 {
  max-height: 100%;
  background-color: transparent;
}

#services{

  height: 500px;
  background-color: transparent;
}

.img-circle {

  border-radius: 50%;
}

.row img {

  max-width: 100%;
  width: 1000px;
  padding: 5px;
}

.container-fluid {

  padding-right: 0px;
  padding-left: 0px;
}

#first-section {

  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

#first-section .row .col-sm-4 {

  height: 350px;
  border-left: 4px solid black;
  border-top: 4px solid black;
  padding: 0;
  height: 337px;

}

#first-section .row img {

padding: 0;
height: 333px;

}


#gallery-row {

  margin-top: 15px;
}


.col-md-4 img {

  height: 333px;
  padding: 10px;
}

#second-section {

  height: 600px;
  background-color: #fbfbfb;
  padding: 5px;
  border-top: 3px solid black;
  border-bottom: 2px solid black;
}

#second-section > div > p {

  font-size: 15px;
  margin-top: -80px;
}

#second-section .container {

  margin-top: 140px;
}

#test {

  max-width: 100%;
  max-height: 100%;
  height: 250px;
}

.navbar-nav > li {
    display: inline-block;
    float:none;
}

.col-xxs-12 {

  padding: 0;
}

@media only screen and (max-width : 480px) {

.navbar-default .navbar-nav>li>a {

    font-size: 11px;
  }
}

@media only screen and (max-width : 500px) {

.col-xs-6 {

    width: 100%;
  }
}

@media only screen and (max-width: 540px ) {

  #second-section > div > p {
    font-size: 14px;
  }

   section.module p:last-child{
    font-size: 14px;
   }

}

@media only screen and (max-width: 768px ) {

  #header {

    display: none;
  }
}

ul.nav.navbar-nav {/* margin-left: -7px; */margin-right: 170px;background-color: #fff;padding: 0;padding-right: 50p;/* margin-bottom: -2px; *//* margin-bottom: -10px; */}

div.navbar-header {

  background-color: white;
}

img.img-responsive {

  height: 267px;
  padding: 0;
  padding-bottom: -500px;
  max-height: 100%;
  max-width: 100%;
  height: 270px;

}

#first-section .row .col-md-4 {

   height: 274px;
}

.text-center p {

  font-size: 1px;
}

section.module:last-child {
  margin-bottom: 0;
}
section.module h2 {
  margin-bottom: 40px;
  font-family: "Roboto Slab", serif;
  font-size: 30px;
}
section.module p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}
section.module p:last-child {
  margin-bottom: 0;
}
section.module.content {
  padding: 40px 0;
  height: 600px;
}
section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover !important; 
  margin-top: -30px;
}
section.module.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

section.module.parallax-1 {
  background-image: url("../img/snowtiger.jpg");
  background-repeat:no-repeat;
  background-size: contain;
  background-position:center;
  background-size: 100%;
  max-width: 100%;
  height: auto2s;


}

section.module.parallax-2 {
  background-image: url("../img/tiger.jpg");

}

section {

  border-bottom: 2px solid black;
}

#myFooter{
    padding-top:32px;
}

#myFooter .container{
    text-align: center;
}

#myFooter .footer-copyright{
    margin-bottom: 35px;
    text-align: center;
    color: #777;
}

#myFooter ul{
    list-style-type: none;
    padding: 0;
    margin-bottom: 18px;
}

#myFooter a{
    color: #282b2d;
    font-size: 18px;
}

#myFooter li{
    display: inline-block;
    margin: 0px 15px;
    line-height: 2;
}

#myFooter .footer-social{
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    background-color: #fdfdfd;
}

#myFooter .fa{
    font-size: 36px;
    margin-right: 15px;
    margin-left: 20px;
    background-color: white;
    color: #d0d0d0;
    border-radius: 51%;
    padding: 10px;
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 43px;
    text-decoration: none;
    transition:color 0.2s;
}

#myFooter .fa-facebook:hover{
   color: #2b55ff;
}

#myFooter .fa-facebook:focus{
    color: #2b55ff; 
}

#myFooter .fa-google-plus:hover{
    color:red;
}

#myFooter .fa-google-plus:focus{
    color:red;
}

#myFooter .fa-twitter:hover{
    color: #00aced;

}

#myFooter .fa-twitter:focus{
    color:#00aced;
}