Question

固定滚动

我创建了一个绝对定位在文档中的徽标元素，当我滚动它时，它会粘贴在窗口顶部并具有固定位置（例如：https://jsfiddle.net/swzbe9cv/2）

的JavaScript

  window.addEventListener('scroll', fixLogo);
  function fixLogo(){
    if(window.scrollY >= trigger){
      if(!logo.classList.contains('fixed')){
        logo.classList.add('fixed');
      }
    } else{
      if(logo.classList.contains('fixed') && !nav.classList.contains('show')){
        logo.classList.remove('fixed');
      }
    }
  }

CSS

.logo {
  position: absolute;
  top: calc(100% + 15px);
  height: 40px;
  width: 100px;
}

.fixed {
  position: fixed;
  top: 15px;
}

出现菜单

然后我决定在左侧添加一个菜单，通过点击徽标元素显示/隐藏。这个菜单有一个固定的位置，标志显示在它上面。（例如：https://jsfiddle.net/6cskthuz/2/）的的JavaScript

  logo.addEventListener('click',showMenu);
  function showMenu(){
    if(nav.classList.contains('show')){
      if(window.scrollY < pageheight && logo.classList.contains('fixed')){
        logo.classList.remove('fixed');
      }
      nav.classList.remove('show');
    } else {
      if(!logo.classList.contains('fixed')){
        logo.classList.add('fixed');
      }
      nav.classList.add('show');
    }
  }

CSS

nav {
  z-index:1;
  position: fixed;
  top: 0px;
  left: -8vw;
  width: 8vw;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  transition: 1s;
  padding-top: 8vw;
  text-align: center;
  font-size: 2rem;
}
.show {
  left: 0px;
}

当菜单出现且徽标处于绝对位置时，如何在菜单顶部设置徽标元素的平滑翻译？

我想这样做仅限CSS ，至少没有jQuery 。

PS：我发现了两个相关的问题： 1. this one关于固定/绝对定位 2.而this one似乎尚未解决，但相似

Answer 1

CSS中的transition属性在逐步过程中起作用;起始值和结束值必须是相同的格式。不幸的是，if let newNavController = self.storyboard?.instantiateViewControllerWithIdentifier("myNavigationController") as? UINavigationController { self.view.window?.rootViewController = newNavController // Now push the desired VC as the example above, only this time your reference to your nav controller is different if let myViewController = self.storyboard?.instantiateViewControllerWithIdentifier("myViewController") as? MyViewControllerClassName { newNavController.pushViewController(myViewController, animated: true) } }和position: fixed;是两个完全不同的值，即使它们都是position: absolute;值。

您正在寻找的行为存在于CSS中，并且称为粘性定位，但它具有very limited support。这是一个有效的演示（确保使用支持的浏览器）：

＆＃13;

property

＆＃13;

html, body {
    margin: 0;
}

body * {
    margin: 20px;
    padding: 20px;
}

.header {
    margin: 0;
    padding: 20px;
    background: #000;
}

.header span {
    display: block;
    color: #fff;
    margin: 0 auto;
    text-align: center;
    padding: 0;
}

.placeholder {
    border: 1px solid black;
    margin: 0 auto;
    text-align: center;
    height: 300px;
}

.slider {
    background: #006264;
    color: white;
    font-weight: bold;
    margin: 0 auto;
    position: sticky;
    -webkit-position: sticky;
    top: 0px;
}

＆＃13;

如果您想要广泛支持该行为，那么您需要使用JavaScript，并且您需要使用JavaScript来添加流畅的转换＆＃34;动画也是。

CSS3从固定转变为绝对

固定滚动

出现菜单

1 个答案: