Question

我是引导/网页设计的新手。任何人都可以帮助我如何在用户向下滚动时缩小标题和标题中的标识???

正如https://www.metlife.com/products/index.html

我有一个标题组件。

这就是我的标题的样子。（JSX）

＆＃13;

<div className="header">
  <Row id="SalesHeader">
    <Col xs={12}>
      <a id="HomeLink">
        <Image src={require( './icon_home.png')} alt="home" />Home
      </a>
      <div id="ContactLink" className="hidden-xs">
        {contactArea}
      </div>
    </Col>
  </Row>
</div>

＆＃13;

谢谢！

Answer 1

您需要在css上添加一些id="SalesHeader"的滚动类只是尝试实现此代码。我使用此代码是100％正常工作

CSS

.fixedHeader {
    height: 20px;
    -webkit-transition: height 500ms ease 0s;
    transition: height 500ms ease 0s;
}

SCRIPT在滚动

上添加fixedHeader

<script>
    $(window).scroll(function(){
      var sticky = $('#yourID'),
          scroll = $(window).scrollTop();

      if (scroll >= 100) 
      {
      sticky.addClass('fixedHeader');

      }
      else 
      { 
      sticky.removeClass('fixedHeader');

      }
      });
</script>

Answer 2

尝试使用此javascript并编写css，因为您需要标题高度

.header {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #0683c9;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
}
.header.smaller {
    height: 75px;
}

} window.onload = init（）;

CSS

  ArrayList al = new ArrayList();

Answer 3

尝试使用它可能有助于创建引导程序模板。

＆＃13;

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

＆＃13;

body {
  padding-top: 50px;
}

nav a {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  font-size: 18px;
}

nav .navbar-toggle {
  margin: 13px 15px 13px 0;
}

.navbar-brand {
  font-size: 30px;
}



nav.navbar.shrink {
  min-height: 35px;
}

nav.shrink a {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  font-size: 15px;
}

nav.shrink .navbar-brand {
  font-size: 25px;
}

nav.shrink .navbar-toggle {
  padding: 4px 5px;
  margin: 8px 15px 8px 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

<div class="container">
  
  <div class="text-center">
    <h1>Bootstrap starter</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
  <div class="text-center">
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
   <div class="text-center">
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
   <div class="text-center">
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
   <div class="text-center">
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
   <div class="text-center">
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
   <div class="text-center">
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
  
</div>

＆＃13;

用户向下滚动时缩小标题

3 个答案: