正文 

当前位置： 首页 > 问答 >

如何在导航栏菜单中实现平滑的向下滑动效果

     2023-03-06     152

关键词：

【中文标题】如何在导航栏菜单中实现平滑的向下滑动效果【英文标题】：How to achieve smoothe slide down effect in Navbar Menu 【发布时间】：2018-03-24 04:43:24 【问题描述】：

目标 - 我想在一些滚动后实现向下滑动（用于导航栏）效果。我实际上实现了我想要的，但我遇到了问题。

问题 - 当向上滚动到顶部时，导航栏变得粘滞而没有效果，这有点吸引人。谁能帮我解决这个问题？

你可以在Codepen看到我的代码。

// Sticky Header
$(window).scroll(function() 
    if ($(window).scrollTop() > 100) 
        $('#header').addClass('sticky-header');
        $('#header .mo-row').removeClass('sticky-border');
     else 
        $('#header').removeClass('sticky-header');
        $('#header .mo-row').addClass('sticky-border');
    
);

var sidebarBox = document.querySelector('#box');
var sidebarBtn = document.querySelector('#btn');
var pageWrapper = document.querySelector('#main-content');

sidebarBtn.addEventListener('click', function(event) 

  if (this.classList.contains('active')) 
      this.classList.remove('active');
      sidebarBox.classList.remove('active');
   else 
      this.classList.add('active');
      sidebarBox.classList.add('active');
  
);

// accordion js

$(document).ready(function() 
    function close_accordion_section() 
        $('.accordion .accordion-section-title').removeClass('active2');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    

    $('.accordion-section-title').click(function(e) 
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');

        if($(e.target).is('.active2')) 
            close_accordion_section();
        else 
            close_accordion_section();

            // Add active class to section title
            $(this).addClass('active2');

            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
        
        e.preventDefault();
    );
);
html 
  box-sizing: border-box;


body 
  margin: 0;
  height: 1000px;
  -webkit-font-smoothing: antialiased;
  font-family: 'Lato', sans-serif;


*,
*:before,
*:after 
  box-sizing: inherit;


ul, li 
  margin: 0;
  padding: 0;
  list-style: none;


img 
  vertical-align: middle;


a 
  text-decoration: none;


.mo-container 
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  z-index: 999;
  position: relative;


.mo-row 
  width: 95%;
  margin: 0 auto;


.mo-grid:before,
.mo-grid:after,
.mo-row:before,
.mo-row:after 
  content: " ";
  display: table;


.mo-grid:after,
.mo-row:after 
  clear: both;


[class*='col-'] 
  width: 100%;
  float: left;
  min-height: 1px;


.col 
  margin: 10px;


@media screen and (min-width: 320px) 
  .col-sm-1 
    width: 8.33333%;
  

  .col-sm-2 
    width: 16.66667%;
  

  .col-sm-3 
    width: 25%;
  

  .col-sm-4 
    width: 33.33333%;
  

  .col-sm-5 
    width: 41.66667%;
  

  .col-sm-6 
    width: 50%;
  

  .col-sm-7 
    width: 58.33333%;
  

  .col-sm-8 
    width: 66.66667%;
  

  .col-sm-9 
    width: 75%;
  

  .col-sm-10 
    width: 83.33333%;
  

  .col-sm-11 
    width: 91.66667%;
  

  .col-sm-12 
    width: 100%;
  

@media screen and (min-width: 768px) 
  .col-md-1 
    width: 8.33333%;
  

  .col-md-2 
    width: 16.66667%;
  

  .col-md-3 
    width: 25%;
  

  .col-md-4 
    width: 33.33333%;
  

  .col-md-5 
    width: 41.66667%;
  

  .col-md-6 
    width: 50%;
  

  .col-md-7 
    width: 58.33333%;
  

  .col-md-8 
    width: 66.66667%;
  

  .col-md-9 
    width: 75%;
  

  .col-md-10 
    width: 83.33333%;
  

  .col-md-11 
    width: 91.66667%;
  

  .col-md-12 
    width: 100%;
  

@media screen and (min-width: 992px) 
  .col-lg-1 
    width: 8.33333%;
  

  .col-lg-2 
    width: 16.66667%;
  

  .col-lg-3 
    width: 25%;
  

  .col-lg-4 
    width: 33.33333%;
  

  .col-lg-5 
    width: 41.66667%;
  

  .col-lg-6 
    width: 50%;
  

  .col-lg-7 
    width: 58.33333%;
  

  .col-lg-8 
    width: 66.66667%;
  

  .col-lg-9 
    width: 75%;
  

  .col-lg-10 
    width: 83.33333%;
  

  .col-lg-11 
    width: 91.66667%;
  

  .col-lg-12 
    width: 100%;
  

.hello-bar 
  height: 40px;
  line-height: 39px;
  background: #52ae56;
  text-align: center;
  color: #fff;


.hello-bar a 
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;


.hello-bar a span 
  font-weight: bold;


.sticky-header 
  background-color: #fff !important;
  box-shadow: 0 2px 4px 0 rgba(87, 71, 81, 0.2);
  height: 65px;
  line-height: 65px;
  position: fixed !important;
  top: 0;
  -webkit-animation-name: slidedown;
  animation-name: slidedown;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);


@-webkit-keyframes slidedown 
  0% 
    opacity: 0;
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
  
  100% 
    -webkit-transform: translateY(0);
    transform: translateY(0);
  

@keyframes slidedown 
  0% 
    -webkit-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    transform: translateY(-400px);
  
  100% 
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  

.sticky-border 
  border-bottom: 1px solid #e8e8e8;


#header-sec 
  position: relative;
  z-index: 9999999;
  height: 65px;
  line-height: 65px;
  /* Fold Out */
  /* accordion css */

#header-sec #header 
  background-color: transparent;
  width: 100%;
  height: 66px;
  line-height: 64px;
  position: absolute;

#header-sec #header .navbar-logo 
  height: 65px;
  line-height: 65px;
  cursor: pointer;

#header-sec #header .navbar-logo img 
  height: 75px;
  margin-top: -4px;
  margin-left: -17px;

#header-sec .nav ul 
  background-color: transparent;

#header-sec .nav ul > li 
  display: inline-block;
  position: relative;

#header-sec .nav a 
  display: block;
  padding: 10px 18px 10px 15px;
  font-size: 0.9em;
  line-height: 1.2em;
  color: #0d1739;
  font-weight: 400;

#header-sec .nav a:hover 
  text-decoration: none;

#header-sec .nav li ul 
  background-color: #fff;

#header-sec .nav li ul li 
  width: 200px;
  display: block;
  text-align: left;

#header-sec .nav li ul a 
  border: none;
  color: #333;

#header-sec .nav li ul a:hover 
  background: #333;
  color: #fff;

#header-sec .nav li ul 
  position: absolute;
  left: 0;
  top: 52px;
  z-index: 1;
  max-height: 0;
  overflow: hidden;
  -webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: 50% 0;
  -webkit-transition: 350ms;
  -moz-transition: 350ms;
  -o-transition: 350ms;
  transition: 350ms;

#header-sec .nav ul > li:hover ul 
  max-height: 1000px;
  -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.27);

#header-sec .accordion-section-content li 
  background: #fff;
  padding: 10px 30px;
  border-bottom: 1px solid #f6f6f6;
  border-left: 1px solid #f6f6f6;

#header-sec .accordion-section-content li:hover 
  background-color: rgba(52, 56, 56, 0.2);

#header-sec .accordion-section-content li:last-child 
  border-bottom: none;

#header-sec a 
  color: #343838;

#header-sec #box 
  position: fixed;
  z-index: 4;
  overflow: auto;
  top: 0px;
  right: -250px;
  width: 250px;
  opacity: 0;
  padding: 20px 0px;
  height: 100%;
  background-color: #f6f6f6;
  color: #343838;
  -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);

#header-sec #box.active 
  right: 0px;
  opacity: 1;

#header-sec #items 
  position: relative;
  top: 8.7%;
  line-height: normal;

#header-sec #items .item 
  position: relative;
  cursor: pointer;
  font-size: 1em;
  /* originally 2ems  */
  padding: 10px 20px;
  -webkit-transition: all 250ms;
  transition: all 250ms;

#header-sec #items .item:hover 
  padding: 10px 20px;
  background-color: rgba(52, 56, 56, 0.2);

#header-sec #btn 
  position: absolute;
  z-index: 5;
  top: 22px;
  right: 9px;
  cursor: pointer;
  -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);

#header-sec #btn div 
  width: 30px;
  height: 2px;
  margin-bottom: 7px;
  background-color: #1d1f20;
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;

#header-sec #btn.active 
  right: 9px;

#header-sec #btn.active div 
  background-color: #343838;

#header-sec #btn.active #top 
  -webkit-transform: translateY(10px) rotate(-135deg);
  -ms-transform: translateY(10px) rotate(-135deg);
  transform: translateY(10px) rotate(-135deg);

#header-sec #btn.active #middle 
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);

#header-sec #btn.active #bottom 
  -webkit-transform: translateY(-10px) rotate(-45deg);
  -ms-transform: translateY(-10px) rotate(-45deg);
  transform: translateY(-10px) rotate(-45deg);

#header-sec .accordion 
  overflow: hidden;
  line-height: normal;

#header-sec .accordion-section-title 
  cursor: pointer;
  width: 100%;
  transition: all linear 0.15s;
  -webkit-transition: all linear 0.15s;
  -moz-transition: all linear 0.15s;
  -ms-transition: all linear 0.15s;
  -o-transition: all linear 0.15s;
  position: relative;
  display: block;
  padding: 10px 20px;

#header-sec .accordion-section-title:hover 
  padding: 10px 20px;
  background-color: rgba(52, 56, 56, 0.2);

#header-sec .accordion-section-content 
  display: none;
  background: #f0f0f0;

#header-sec .active2, #header-sec .open 
  display: block;

#header-sec #box, #header-sec #btn 
  display: none;

@media screen and (max-width: 992px) 
  #header-sec .navbar-menu 
    display: none;
  
  #header-sec #box, #header-sec #btn 
    display: block;
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hello-bar">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <a class="try_it_for_free_event_gtm" onclick="ga('send', 'event', 'TryForFree', 'TryForFree-clicked', 'TryForFree')" href="http://info.moengage.com/push-amplification/?utm_source=homepage&utm_medium=ribbon">Introducing <span>MoEngage Push Amplification</span>: Industry-First Solution for Push Delivery Issues
                 &nbsp;&nbsp;&nbsp;<img src="img/notification.png"  style="width: 17px;"></a>
            </div>
        </div>
    </div>
</div>

<section id="header-sec">
    <header id="header">
        <div class="mo-container">
            <div class="mo-row sticky-border">
                <nav class="col-sm-6 col-md-4 col-lg-2">
                    <div class="navbar-logo">
                        <img src="img/logo-dark.png" >
                    </div>
                </nav>

                <nav class="col-sm-6 col-md-8 col-lg-10 text-right">
                    <div class="navbar-menu nav">
                        <ul>
                            <li>
                                <a href="">Product &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul>
                                    <li><a href="#">Flows</a></li>
                                    <li><a href="#">Web Push</a></li>
                                    <li><a href="#">Email Campaigns</a></li>
                                    <li><a href="#">In-app Nativ</a></li>
                                    <li><a href="#">User Intelligence</a></li>
                                    <li><a href="#">Engagement Platform</a></li>
                                    <li><a href="#">Smart Triggers</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="">Customers &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul>
                                    <li><a href="#">Customer Stories</a></li>
                                    <li><a href="#">Help &amp; Support</a></li>
                                    <li><a href="#">Developers Docs</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="">Company &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul>
                                    <li><a href="">About</a></li>
                                    <li><a href="">Blog</a></li>
                                    <li><a href="">Jobs</a></li>
                                </ul>
                            </li>

                            <li><a href="">Pricing</a></li>
                            <li><a href="">Login</a></li>
                            <li><a href="">Sign Up</a></li>
                            <li>
                                <a href="" style="padding-right: 0;">
                                    <button class="button primary">Free Demo</button>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div id="box">
                        <div id="items">
                            <div class="accordion">
                                <div class="accordion-section">
                                    <a class="accordion-section-title" href="#accordion-1">
                                        Product &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i>
                                    </a>
                                    <div id="accordion-1" class="accordion-section-content">
                                        <ul>
                                            <li><a href="#">Flows</a></li>
                                            <li><a href="#">Web Push</a></li>
                                            <li><a href="#">Email Campaigns</a></li>
                                            <li><a href="#">In-app Nativ</a></li>
                                            <li><a href="#">User Intelligence</a></li>
                                            <li><a href="#">Engagement Platform</a></li>
                                            <li><a href="#">Smart Triggers</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion">
                                <div class="accordion-section">
                                    <a class="accordion-section-title" href="#accordion-2">
                                      Customers &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i>
                                    </a>
                                    <div id="accordion-2" class="accordion-section-content">
                                        <ul>
                                            <li><a href="">About</a></li>
                                            <li><a href="">Blog</a></li>
                                            <li><a href="">Jobs</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion">
                                <div class="accordion-section">
                                    <a class="accordion-section-title" href="#accordion-3">
                                      Company &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i>
                                    </a>
                                    <div id="accordion-3" class="accordion-section-content">
                                        <ul>
                                            <li><a href="">About</a></li>
                                            <li><a href="">Blog</a></li>
                                            <li><a href="">Jobs</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="item">Pricing</div>
                            <div class="item">Login</div>
                            <div class="item">Sign Up</div>
                        </div>
                    </div>

                    <div id="btn">
                        <div id="top"></div>
                        <div id="middle"></div>
                        <div id="bottom"></div>
                    </div>
                </nav>
            </div>
        </div>
    </header>
</section>

【问题讨论】：

好吧，我们不能，实际上，您的链接不起作用。并且在实际问题中也需要发布代码。 我已经更新了链接@Roberrrt 所以您希望导航栏在向上滚动时滑入？ 是的，类似的东西看起来并不奇怪@Roberrrt 任何人请回答 【参考方案1】：

因此，我更改了您的粘性标题 JS，以在向上滚动时添加一个类，并在从顶部滚动 200 像素后添加一个显示类。

JS

 // Sticky Header
 jQuery(window).scroll(function()     
     var scroll = jQuery(window).scrollTop();
     if (scroll > 200) 
         jQuery("#header").addClass("show");
      else 
         jQuery("#header").removeClass("show");
     
 );

 var lastScrollTop = 0;
 jQuery(window).scroll(function(event)
 var st = jQuery(this).scrollTop();
    if (st > lastScrollTop)
        jQuery("#header").removeClass("up");
     else 
       jQuery("#header").addClass("up");
    
    lastScrollTop = st;
 );

然后添加 CSS

    #header-sec #header,
    #header-sec #header.up
          position: absolute;
          top: 0;
          -webkit-transition: top 500ms ease-out ;
           -moz-transition: top 500ms ease-out ;
           -o-transition: top 500ms ease-out ;
           transition: top 500ms ease-out ;
    
    #header-sec #header.show 
     position: fixed !important;
      top: 0;
      -webkit-animation-name: slidedown;
      animation-name: slidedown;
      -webkit-animation-duration: .5s;
      animation-duration: .5s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    
    #header-sec #header.up.show 
         position: fixed !important;
         top: 0;
        -webkit-animation-name: slideup;
        animation-name: slideup;
        -webkit-animation-duration: .5s;
        animation-duration: .5s;
       -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
    
    @-webkit-keyframes slideup 
      0% 
        opacity: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      
      100% 
        -webkit-transform: translateY(-400px);
        transform: translateY(-400px);
      
    
    @keyframes slideup 
      0% 
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
     
      100% 
        -webkit-transform: translateY(-400px);
       -ms-transform: translateY(-400px);
        transform: translateY(-400px);

希望你能用这个

【讨论】：

如何在angularjs中实现导航栏

】如何在angularjs中实现导航栏【英文标题】：Howtoimplementanavigationbarinangularjs【发布时间】：2013-08-2520:23:36【问题描述】：从angularjs作为新手开始，我创建了一个导航栏。它有几个子菜单。但我不完全确定使用angularjs处理它的最佳... 查看详情

如何从左侧而不是从顶部滑动导航栏？

】如何从左侧而不是从顶部滑动导航栏？【英文标题】：Howtoslidenavbarfromleftinsteadfromtop?【发布时间】：2015-10-1622:41:43【问题描述】：Bootstrap支持从顶部切换导航栏。屏幕小怎么能从左边滑？例如：在上面提供的屏幕截图中，当屏... 查看详情

为响应式导航菜单添加向下滑动效果

】为响应式导航菜单添加向下滑动效果【英文标题】：addingslidedowneffecttoresponsivenavigationmenu【发布时间】：2020-04-2512:43:31【问题描述】：我有以下jsfiddle，我试图让下拉菜单具有向下滑动的效果（或任何可以软化默认悬停效果的... 查看详情

在 Swift 3.0 中实现滑动以在没有导航栏的情况下向后导航

】在Swift3.0中实现滑动以在没有导航栏的情况下向后导航【英文标题】：ImplementswipetonavigatebackwithnonavigationbarinSwift3.0【发布时间】：2017-10-2522:53:29【问题描述】：这是我的视图控制器：我没有导航栏，但有一个后退按钮，可将用... 查看详情

如何在batmanjs中实现导航菜单

】如何在batmanjs中实现导航菜单【英文标题】：Howtoimplementnavigationmenuinbatmanjs【发布时间】：2012-12-0316:09:05【问题描述】：我正在尝试构建一个导航菜单，根据当前控制器操作突出显示当前导航项；但我找不到任何东西告诉我该... 查看详情

Bootstrap：在标题（导航栏）中实现类似 facebook 的通知作为子菜单，而不仅仅是计数器

】Bootstrap：在标题（导航栏）中实现类似facebook的通知作为子菜单，而不仅仅是计数器【英文标题】：Bootstrap:Implementfacebook-likenotificationsinheader(navbar)assubmenu,notjustacounter【发布时间】：2013-11-1505:42:01【问题描述】：我可能只是智... 查看详情

如何在 UIPageviewcontroller 中实现静态菜单栏？

】如何在UIPageviewcontroller中实现静态菜单栏？【英文标题】：HowtoimplementastaticmenubarinanUIPageviewcontroller?【发布时间】：2016-06-3016:13:27【问题描述】：我试图在我的uipageviewcontroller中构建一个静态菜单栏，就像youtube一样。有谁知道... 查看详情

如何在 MVC 5 中实现菜单

】如何在MVC5中实现菜单【英文标题】：HowtoimplementMenuinMVC5【发布时间】：2018-10-2410:31:50【问题描述】：创建了一个MVC5项目，您想更改此项目的菜单，因为它使用了Bootwatch，您要实现的菜单如下我做的第一件事就是改变我项目的... 查看详情

在 Google Web Toolkit (GWT) 中实现页眉、页脚和菜单栏

...9-1718:25:23【问题描述】：我刚开始学习GoogleWebToolkit(GWT)。如何在我的GWT应用程序中实现页眉、左侧导航栏和页脚？如何将页眉和页脚放在一个页面中并在所有其他页面中重复使用？请帮助我如何实 查看详情

滑动 ViewController 时出现导航栏错误

】滑动ViewController时出现导航栏错误【英文标题】：NavigationbarBugwhileSlidingViewController【发布时间】：2016-08-0109:40:31【问题描述】：我有一个视图控制器，它是第二个视图控制器，需要一个导航栏。第一个是不需要导航栏的控制器... 查看详情

还想用滑动状态栏实现滑动侧菜单。在 iOS 中

】还想用滑动状态栏实现滑动侧菜单。在iOS中【英文标题】：wanttoImplementSlidingsidemenuwithslidingstatusbaralso.iniOS【发布时间】：2013-10-0317:53:19【问题描述】：我有兴趣在我的应用程序中实现左侧菜单，为此我使用了NVSlideMenuController。... 查看详情

在 Angular 2 中实现滑动导航的最佳方式是啥？

】在Angular2中实现滑动导航的最佳方式是啥？【英文标题】：WhatisthebestwaytoimplementswipenavigationinAngular2?在Angular2中实现滑动导航的最佳方式是什么？【发布时间】：2017-07-2408:20:03【问题描述】：我是Angular2的新手，正在寻找一种方... 查看详情

如何使导航栏在特定视图上半透明？

】如何使导航栏在特定视图上半透明？【英文标题】：HowtomakeNavigationBartranslucentonspecificview?【发布时间】：2015-08-0420:01:14【问题描述】：我有一个包含三个视图的向下钻取层次结构，它们都嵌入在导航控制器中。我希望最后一个... 查看详情

如何在swift / SwiftUI中为滑动手势设置菜单栏图标的操作

】如何在swift/SwiftUI中为滑动手势设置菜单栏图标的操作【英文标题】：Howtosetanactiontomenubaricononswipegestureinswift/SwiftUI【发布时间】：2020-07-1301:05:44【问题描述】：我正在尝试获取一个我正在开发的小型测试应用程序，以在向下滑... 查看详情

如何在 iPhone 上实现与在主屏幕之间导航相同的平移/滑动效果组合？

】如何在iPhone上实现与在主屏幕之间导航相同的平移/滑动效果组合？【英文标题】：Howtorealizethesamecombinationofpan/swipeeffectasinnavigatingbetweenhomescreensontheiPhone?【发布时间】：2012-10-2215:57:00【问题描述】：在iPhone上，您可以通过三种... 查看详情

如何在android中实现全屏，去掉标题栏效果

参考技术Aandroid全屏的效果如下图，整个应用占据手机屏幕（状态栏看不到）要实现全屏效果，可以配置activity的主题样式为theme.notitlebar.fullscreen也可以在activity的oncreate方法中加入下面代码（注意要在setcontentview之前）this.requestwi... 查看详情

模态segue推动顶部的附加导航栏滑动(代码片段)

...栏立即被模态视图覆盖，但是片刻屏幕闪烁，这很烦人。如何防止额外的导航栏从顶部向下滑动？答案我发现了这个错误！登录视图控制器具有以下方法：overridefuncviewWillDisappear(_animated:Bool)navigationController?.setNavigationBarHidden(false,... 查看详情

底部应用栏在使用片段导航时向上/向下滑动（导航架构组件）

】底部应用栏在使用片段导航时向上/向下滑动（导航架构组件）【英文标题】：BottomAppBarslideup/downonnavigatingwithfragments(NavigationArchitectureComponents)【发布时间】：2019-03-0514:54:23【问题描述】：我正在查看底部应用栏，有一个很好的... 查看详情