angular: липкий navbar не работает (ничего не отображается в localhost: 4200), но работает, если положить его в блокнот, как обычный HTML, ПОЧЕМУ? - PullRequest
Новая
       5

angular: липкий navbar не работает (ничего не отображается в localhost: 4200), но работает, если положить его в блокнот, как обычный HTML, ПОЧЕМУ?

0 голосов
/ 11 мая 2018

Я хочу сделать веб-страницу в Angular 6, но почему-то она не работает, если я использую ее в Angular, но работает как результат отображения (требуется некоторая настройка, но выдает желаемый результат) при написании кода в NOTEPAD как обычный HTML.

Я не могу понять, что не так ... я новичок в ангуляторе ... было бы здорово, если бы кто-то мог помочь мне узнать причину этого.

menu.component.css: 

body {
    position: relative; 
    height:100%;
}
.affix {
    top:0;
    width: 100%;
    z-index: 9999 !important;
}
.navbar {
    margin-bottom: 0px;
}

.affix ~ .container-fluid {
   position: relative;
   top: 50px;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section4 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section5 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
.logo{
height:20px;
width:100px;
}
.imgsize{
  background-position: fixed;
  height:70px;
  width:120px;
  margin-top :10px;
  margin-bottom:20px;

}
.bg1{
  background-position: center ;
  background-repeat: no-repeat;
  max-width:100%;
  height:50%;
  background-size:100% 100%;  
}
/*body{
  height:100%;
}*/
.center{
  position:absolute;
  top:50%;
  left:60%;
  transform: translate(-50%,-50%);
}
.text{
  position:absolute;
  top:60%;
  left:68%;
  transform: translate(-50%,-50%);
}
.gs{
  max-height:40px;
  max-width:50px;
}
.exp{
  max-height:40px;
  max-width:90px;
}
.ap{
  max-height:50px;
  max-width:100px;
}

Пожалуйста, не обращайте внимания на изображение заголовка и макеты ... Я использовал другой img, и эта часть работает просто отлично! проблема с навигационной панелью.

menu.component.html 

<body data-spy="scroll" data-target=".navbar" data-offset="50">

        <header class="bg1 w3-display-container w3-wide w3-content">
          <img class="w3-image" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
          <div class="center w3-margin-top ">
          <h1 class="w3-xxlarge w3-animate-zoom" >TECHNOLOGY <span class="w3-padding w3-black w3-opacity-min"><b>FUSION</b></span></h1>
          </div>
          <div class="text">
            <h1 class="w3-xxlarge w3-animate-zoom" ><span class="w3-padding w3-white ">WORKSHOP</span></h1>
          </div>
          <div class="w3-display-bottomright w3-padding-large" id="wrapper">
            <h5>-sponsored by<span><a href="http://onlinegsystems.com/" target="_blank" ><img class="gs hover " hspace="3px" src="https://about.canva.com/wp-content/uploads/sites/3/2016/08/Band-Logo.png"></a><a href="https://www.amarpushp.org/" target="_balank"><img class="ap hover" hspace="3px" src="https://about.canva.com/wp-content/uploads/sites/3/2016/08/Band-Logo.png"></a><a href="http://expression.amarpushp.org/" target="_blank" ><img class="exp hover" hspace="3px" src="https://about.canva.com/wp-content/uploads/sites/3/2016/08/Band-Logo.png"></a></span></h5>
         </div>
        </header>

      <nav class="navbar navbar-inverse " data-spy="affix" data-offset-top="197">
          <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>                        
              </button>
              <a class="navbar-brand" href="#"><img src="https://about.canva.com/wp-content/uploads/sites/3/2016/08/Band-Logo.png" class="logo"></a>
            </div>

              <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="#section1">HOME</a></li>
                  <li><a href="#section2">ABOUT</a></li>
                  <li><a href="#section3">WORKSHOPS</a></li>
                  <li><a href="#section4">FAQ</a></li>
                  <li><a href="#section5"><span class="glyphicon glyphicon-log-in">LOGIN</a></li>

                </ul>
            </div>
          </div>
        </nav>    

        <div id="section1" class="container-fluid">
          <h1>Section 1</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section2" class="container-fluid">
          <h1>Section 2</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section3" class="container-fluid">
          <h1>Section 3</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section4" class="container-fluid">
          <h1>Section 4</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section5" class="container-fluid">
          <h1>Section 5</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>

        </body>

версия блокнота 

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  body {
      position: relative; 
      height:100%;
  }
  .affix {
      top:0;
      width: 100%;
      z-index: 9999 !important;
  }
  .navbar {
      margin-bottom: 0px;
  }

  .affix ~ .container-fluid {
     position: relative;
     top: 50px;
  }
  #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
  #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
  #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
  #section4 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
  #section5 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
  .logo{
  height:20px;
  width:100px;
  }
  .imgsize{
    background-position: fixed;
    height:70px;
    width:120px;
    margin-top :10px;
    margin-bottom:20px;

}
.bg1{
    background-position: center ;
    background-repeat: no-repeat;
    max-width:100%;
    height:50%;
    background-size:100% 100%;  
}
/*body{
    height:100%;
}*/
.center{
    position:absolute;
    top:50%;
    left:60%;
    transform: translate(-50%,-50%);
}
.text{
    position:absolute;
    top:60%;
    left:68%;
    transform: translate(-50%,-50%);
}
.gs{
    max-height:40px;
    max-width:50px;
}
.exp{
    max-height:40px;
    max-width:90px;
}
.ap{
    max-height:50px;
    max-width:100px;
}


  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<header class="bg1 w3-display-container w3-wide w3-content">
  <img class="w3-image" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
  <div class="center w3-margin-top ">
  <h1 class="w3-xxlarge w3-animate-zoom" >TECHNOLOGY <span class="w3-padding w3-black w3-opacity-min"><b>FUSION</b></span></h1>
  </div>
  <div class="text">
    <h1 class="w3-xxlarge w3-animate-zoom" ><span class="w3-padding w3-white ">WORKSHOP</span></h1>
  </div>
  <div class="w3-display-bottomright w3-padding-large" id="wrapper">
    <h5>-sponsored by<span><a href="http://onlinegsystems.com/" target="_blank" ><img class="gs hover " hspace="3px" src="https://about.canva.com/wp-content/uploads/sites/3/2016/08/Band-Logo.png"></a><a href="https://www.amarpushp.org/" target="_balank"><img class="ap hover" hspace="3px" src="https://about.canva.com/wp-content/uploads/sites/3/2016/08/Band-Logo.png"></a><a href="http://expression.amarpushp.org/" target="_blank" ><img class="exp hover" hspace="3px" src="https://about.canva.com/wp-content/uploads/sites/3/2016/08/Band-Logo.png"></a></span></h5>
 </div>
</header>

<nav class="navbar navbar-inverse " data-spy="affix" data-offset-top="197">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#"><img src="https://about.canva.com/wp-content/uploads/sites/3/2016/08/Band-Logo.png" class="logo"></a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#section1">HOME</a></li>
          <li><a href="#section2">ABOUT</a></li>
          <li><a href="#section3">WORKSHOPS</a></li>
          <li><a href="#section4">FAQ</a></li>
          <li><a href="#section5"><span class="glyphicon glyphicon-log-in">LOGIN</a></li>

        </ul>
      </div>
    </div>
  </div>
</nav>    

<div id="section1" class="container-fluid">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section4" class="container-fluid">
  <h1>Section 4</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section5" class="container-fluid">
  <h1>Section 5</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>

</body>
</html>

это код, взятый из w3-school для липкой функции navbar.

1 Ответ

0 голосов
/ 11 мая 2018

Вам необходимо добавить путь к css-файлу в массиве styleUrls компонента.

...