个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我的页面看起来非常类似于:https://www.polymer-project.org/components/core-scroll-header-panel/demo.html 。唯一的区别是我的页面设置了 keepCondensedHeader 标志。
我现在想做的(如果可能的话):如果标题是压缩的，则隐藏标题(或压缩标题中显示的任何一个元素)。
任何指示将不胜感激。
最佳答案
实际上，演示文件中的 JavaScript 很好地提示了如何轻松完成此类操作。
我在这里复制了整个 html 和 js，并添加了两行，以便在标题压缩时隐藏标题。
为什么我将 128m 作为 translate Y 的原因是因为最大标题高度是192d.height 压缩高度为 64d.压缩高度。当 header 压缩时，它在 y 轴上移动 128m 的距离 (192 - 64d.height - d.condensedHeight)。
<body unresolved>
<core-scroll-header-panel condenses keepcondensedheader>
<core-toolbar class="tall">
<core-icon-button icon="arrow-back"></core-icon-button>
<div flex></div>
<core-icon-button icon="search"></core-icon-button>
<core-icon-button icon="more-vert"></core-icon-button>
<div class="bottom indent title">Title</div>
</core-toolbar>
<div class="content">
<sample-content size="100"></sample-content>
</div>
</core-scroll-header-panel>
<script>
// custom transformation: scale header's title
var titleStyle = document.querySelector('.title').style;
// added code - here we need to obtain the title div as well
var title = document.querySelector('.title');
addEventListener('core-header-transform', function (e) {
var d = e.detail;
var m = d.height - d.condensedHeight;
var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
titleStyle.transform = titleStyle.webkitTransform =
'scale(' + scale + ') translateZ(0)';
// added code - here we hide the title when the header is condensed
title.hidden = d.y == m;
});
</script>
</body>
希望这有帮助!
<小时/>更新
实际上，现在我想，对 title 的 opacity 进行动画处理可能比显示/隐藏它更好。加上 core-scroll-header-panel 的平滑滚动和淡入淡出背景，它将提供更好的用户体验!
感谢 core-animation 它非常简单。
首先我们需要包含此引用。
<link rel="import" href="../core-animation/core-animation.html">
然后定义淡入和淡出动画。
<body unresolved>
<!--define the opacity animations-->
<core-animation id="out" fill="forwards" duration="400">
<core-animation-keyframe>
<core-animation-prop name="opacity" value="1"></core-animation-prop>
</core-animation-keyframe>
<core-animation-keyframe>
<core-animation-prop name="opacity" value="0"></core-animation-prop>
</core-animation-keyframe>
</core-animation>
<core-animation id="in" fill="forwards" duration="400">
<core-animation-keyframe>
<core-animation-prop name="opacity" value="0"></core-animation-prop>
</core-animation-keyframe>
<core-animation-keyframe>
<core-animation-prop name="opacity" value="1"></core-animation-prop>
</core-animation-keyframe>
</core-animation>
最后，我们在 core-header-transform 处理程序中调用它们。
// animation variables
var fadeIn, fadeOut;
// create a local bool to ensure the 'fade in' animation is only called once
var condensed = false;
// retrieve the animations and set their targets
addEventListener('polymer-ready', function (e) {
fadeOut = document.getElementById('out');
fadeOut.target = title;
fadeIn = document.getElementById('in');
fadeIn.target = title;
});
addEventListener('core-header-transform', function (e) {
var d = e.detail;
var m = d.height - d.condensedHeight;
var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
titleStyle.transform = titleStyle.webkitTransform =
'scale(' + scale + ') translateZ(0)';
// when the header is condensed, we fade it out
if (d.y == m) {
condensed = true;
fadeOut.play();
}
// otherwise, we fade it back in
else {
if (condensed) {
condensed = false;
fadeIn.play();
}
}
});
关于polymer - 如果 core-scroll-header-panel 压缩，如何隐藏标题元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27581309/
25
4
0
我想使用 overflow: scroll(或 auto)完成比屏幕宽的图库预览。在右侧，与最后一张可见图像重叠的阴影应该表示右侧可以看到更多图像。 这是一个 fiddle :http://jsfid
我的网格面板的滚动条有问题。当我滚动到底部并试图再次向上滚动时，滚动条会自动向下滚动，防止我滚动到列表的顶部。。。我试着设置布局“合适”，或给面板一个特定的宽度和高度大小，但这些解决方案都不起作用。。
这段代码的作用是什么？ var oldScrollPos = $(window).scrollTop(); $(window).on('scroll.scrolldisabler', fu
..对于这个元素，我会在某个时候烧脑。 10 小时后仍然没有任何消息。 溢出的元素在 Android stock 浏览器(目前在 s3 mini，android 4.1.2 上测试)中没有任何平滑度。
基本上，我想要的是固定标题、卡住 Pane 、表格，例如 http://www.cssplay.co.uk/menu/tablescroll.html 。然而，他的 table 有一个主要弱点。标题不
我在我的一个项目中使用 Twitter Bootstrap，但是我的内容超出了浏览器 View 的问题。通常您会在屏幕右侧看到滚动条，但在我的情况下没有。我在 overflow: hidden; 之后
是否有一个“有效”的解决方案可以使对话框随滚动条滚动，而不是仍然从内部窗口边界的中心固定？ 在某些情况下，用户的分辨率可能太小而无法包含对话框，在这种情况下，部分对话框可能会被隐藏。您可能在隐藏部分有
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: hide scrollbar while still able to scroll with mouse/k
我希望能够水平滚动浏览一些文章，但它不起作用。我尝试在内容周围放置一个边框，这样一些内容就会被截断，这样我就可以滚动，但是当我这样做时文章会垂直对齐... 这是我正在使用的代码: HTML:
我已经使用 HSROLL 成功创建了一个组合框，如下所示: HWND find = CreateWindowEx(0, WC_COMBOBOX, _T(""), CBS_DROPDOWN | WS_V
我有一个 定位于 position:fixed .当窗口在水平方向上太小而无法容纳 div 时，不会出现滚动条，div 的右侧会被简单地切断。 如果我更改为 position:absolute，滚动条
我对这两个参数完全感到困惑， es.scroll.size es.scroll.limit 我做了一些测试，仍然不知道。 es.scroll.limit = es.scroll.size * num_
我正在尝试使用 skrollr 构建网站.这是jFiddle link对于我已经尝试过的。但是正如您所见，当 smoothScrolling 设置为 true 时，它不会按预期工作。当设置 smo
最近，我在一个网站上工作，我想在不同的滚动位置拍摄特定的效果。我正在使用 Velocity JS 制作动画。有一个元素我想自动滚动到另一个特定的滚动位置。这可以使用 Velocity JS 轻松实现。
继续追加，您会看到最新的聊天消息出现，但在某个点后它会停止自动向下滚动。我怎样才能解决这个问题？谢谢。 http://jsfiddle.net/VMcsU/ $("#button1").click(f
在我的代码中，y 滚动位置(以像素为单位)是滚动 Pane 的顶部: stage = new Stage(new StretchViewport(480, 800)); Image m
我有一个模态对话框，里面有一个可滚动的 div。 div 设置为 overflow: scroll; 但是，当用户在 div 中一直向下滚动时，弹出窗口后面的内容开始向下滚动。 问题:当弹出窗口打开时
我正在使用 AutoCompleteTextView 让我的 Android 应用程序的用户使用自定义网络服务搜索内容:它按预期工作，但目前我找不到实现“无尽滚动”的方法"在下拉 ListView 上
我在我的应用程序中使用工具栏并使用这个 link我隐藏了工具栏，它按预期完美工作。但是当列表只有一个/两个项目时，不需要滚动工具栏，因为底部有足够的空间。 隐藏工具栏背后的想法是当列表项超出屏幕高度时
我是 Ios 开发的新手，我在导航项中添加了一个 Searchbar我想要实现的是当我向上滚动 tableview我想隐藏 Searchbar 并在向下滚动时显示它 类似于 iPAD/Iphone 上
我是一名优秀的程序员,十分优秀！