ホームページ ウェブフロントエンド jsチュートリアル MooTools ページ スクロール フローティング レイヤー インテリジェント ポジショニング実装コード_Mootools

MooTools ページ スクロール フローティング レイヤー インテリジェント ポジショニング実装コード_Mootools

May 16, 2016 pm 06:03 PM
スクロール

HTML コード:

コードをコピー コードは次のとおりです:


私は恥ずかしがり屋のフローティングレイヤーです...


JS コード:
コードをコピー コードは次のとおりです。

var $smartFloat = function(elements) {
var Position = function(element) ) {
var top = element.getPosition().y, pos = element.getStyle("position");
window.addEvent("scroll", function() {
var スクロール = this. getScroll(). y;
if (スクロール > トップ) {
if (window.XMLHttpRequest) {
position: "fixed",
top: 0
} );
} else {
element.setStyles({
トップ: スクロール
});
}
}else {
element.setStyles({
位置: "絶対",
トップ:
});
}); array") {
return elements.each(function(items) {
position(items);
});
} else if ($type(elements) === "element") {
位置(要素);
}
}

//バインディング
$smartFloat($("float"));
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか? JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか? Oct 22, 2023 am 08:12 AM

JavaScriptで指定した要素位置までスクロールする機能を実装するにはどうすればよいですか? Web ページにおいて、ユーザーの視線を特定の要素の位置に集中させる必要がある場合、JavaScript を使用して、指定された要素の位置までスクロールする機能を実装できます。この記事では、JavaScript を使用してこの関数を実装する方法と、対応するコード例を紹介します。まず、対象要素の位置情報を取得する必要があります。 Element.getBoundingClientを使用できます

HTML、CSS、jQuery: 自動スクロール掲示板を作成する HTML、CSS、jQuery: 自動スクロール掲示板を作成する Oct 27, 2023 pm 06:31 PM

HTML、CSS、および jQuery: 自動的にスクロールする掲示板を作成する 最新の Web デザインでは、重要な情報を伝え、ユーザーの注意を引くために掲示板がよく使用されます。自動スクロール掲示板は、Web ページ上で広く使用されており、掲示板のコンテンツがページ上でスクロールしてアニメーション形式で表示され、情報の表示効果とユーザー エクスペリエンスが向上します。この記事ではHTML、CSS、jQueryを使って自動スクロール掲示板を作る方法と具体的なコード例を紹介します。まず、HTが必要です

iframe のスクロール動作を監視する iframe のスクロール動作を監視する Feb 18, 2024 pm 08:40 PM

iframe のスクロールを監視する方法には、特定のコード サンプルが必要です。iframe タグを使用して Web ページに他の Web ページを埋め込む場合、場合によっては、iframe 内のコンテンツに対して特定の操作を実行する必要があります。一般的なニーズの 1 つは、スクロールが発生したときに対応するコードを実行できるように、iframe のスクロール イベントをリッスンすることです。以下では、JavaScript を使用して iframe のスクロールを監視する方法を紹介し、参考として具体的なコード例を示します。 iframe 要素を取得する まず、必要なものがあります。

JavaScript を使用して、ページの一番下までスクロールしたときに自動的に読み込まれる無限スクロール効果を実現するにはどうすればよいですか? JavaScript を使用して、ページの一番下までスクロールしたときに自動的に読み込まれる無限スクロール効果を実現するにはどうすればよいですか? Oct 27, 2023 pm 06:30 PM

JavaScript は、ページの一番下までスクロールすると自動的に読み込まれる無限スクロール効果をどのように実現しているのでしょうか?無限スクロール効果は、現代の Web 開発における一般的な機能の 1 つであり、ページの一番下までスクロールすると、より多くのコンテンツが自動的に読み込まれるため、ユーザーはボタンやリンクを手動でクリックすることなく、より多くのデータやリソースを取得できます。この記事では、JavaScript を使用してこの機能を実現する方法を検討し、具体的なコード例を示します。ページの一番下までスクロールすると自動的に読み込まれる無限スクロール効果を実現するには、主に以下に分かれます

画像のスクロール切り替え効果をJavaScriptで実装するにはどうすればよいですか? 画像のスクロール切り替え効果をJavaScriptで実装するにはどうすればよいですか? Oct 20, 2023 pm 05:51 PM

JavaScriptで画像のスクロール切り替え効果を実現するにはどうすればよいですか?現代の Web デザインでは、画像のスクロール切り替え効果は一般的に使用されるデザイン要素の 1 つであり、Web ページにダイナミックさと鮮やかさを加えることができます。一般的に使用されるスクリプト言語としての JavaScript は、この効果を実現するのに役立ちます。この記事では、JavaScript を使用して画像のスクロール切り替え効果を実現する方法と、対応するコード例を紹介します。まず、画像を表示するための HTML 構造を準備する必要があります。特定の世代

Vueで全画面スクロール効果を実装する方法 Vueで全画面スクロール効果を実装する方法 Nov 08, 2023 am 08:42 AM

Vue で全画面スクロール効果を実現する方法 Web デザインでは、全画面スクロール効果はユーザーに非常にユニークでスムーズなブラウジング エクスペリエンスをもたらします。この記事では、Vue.js で全画面スクロール効果を実現する方法と具体的なコード例を紹介します。全画面スクロール効果を実現するには、まず Vue.js フレームワークを使用してプロジェクトを構築する必要があります。 Vue.js では、vue-cli を使用してプロジェクトのスケルトンをすばやく構築できます。次に、フルページなどのスクロール効果を実現するために、いくつかのサードパーティ ライブラリを導入する必要があります。

CSSで下のボタンへのスムーズなスクロールを実現する方法 CSSで下のボタンへのスムーズなスクロールを実現する方法 Nov 21, 2023 pm 05:11 PM

CSSを使って下部ボタンへのスムーズなスクロールを実現する方法 Webデザインでは、ユーザーエクスペリエンスを向上させるために、ページの先頭に戻るボタンや下部にスクロールするボタンなど、便利な機能を追加することがよくあります。この記事では、CSSを使用して下部ボタンへのスムーズなスクロールを実装する方法と、具体的なコード例を詳しく紹介します。まず、ボタン要素を HTML に追加して、一番下までスクロールする機能をトリガーする必要があります。デザインのニーズに応じて、タグまたは <button> タグを使用できます。存在する

JavaScript を使用して、ナビゲーション メニューを指定した位置までスクロールするハイライト効果を実現するにはどうすればよいですか? JavaScript を使用して、ナビゲーション メニューを指定した位置までスクロールするハイライト効果を実現するにはどうすればよいですか? Oct 19, 2023 am 09:46 AM

JavaScript を使用して、ナビゲーション メニューを指定した位置までスクロールするハイライト効果を実現するにはどうすればよいですか?ナビゲーション メニューは Web デザインの一般的なコンポーネントの 1 つであり、ユーザー エクスペリエンスを向上させるために、JavaScript を使用して、ナビゲーション メニューが指定された位置にスクロールするときに強調表示効果を実現できます。このようにして、ユーザーがページをスクロールすると、ナビゲーション メニューがリアルタイムで更新され、現在の場所が表示されます。この効果を実現する鍵は、ページ スクロール イベントを監視し、現在のスクロール位置と指定された位置の関係を判断することです。以下、

See all articles