このブログの設定、検索　SearchWP　自動で隠す　スクロール　変更

 

2023-07-27 移行に伴う改造。html

<div class="banner">
  <form method="get" action="/" class="search-form">
    <input type="search" class="search-field" style="background-color: #fffacd; display: none; width: 100%;" name="s" data-swplive="true" oninput="this.value=this.value.replace(/　/g, ' ');" />
    <input class="btn_search" type="button" value="検索" style="display: none;" />
    <button class="btn_hide" type="button" style="display: none;">非表示</button>
  </form>
  <button class="btn_article_search" type="button"><span>検</span><br><span>索</span></button>

</div>

<style type="text/css">
.banner {
  z-index: 9999;
  width: 100%;
  height:100px;
  position: fixed;
  top: 100px;
  transition: 1s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-form {
  display: inline-block;
  width: 100%; /* formの幅を80%にする */
}

.search-field {
  width: 100%; /* input fieldをformの全幅にする */
}
.btn_article_search {
  position: fixed;
  left: 0;
  top: 150px; /* ヘッダーの高さに合わせて調整してください */
  z-index: 9999; /* 他の要素に覆い隠されないようにする */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒色背景 */
  color: #fff; /* テキストの色を白に変更 */
  width: 50px; /* ボタンの幅を設定 */
  height: 100px; /* ボタンの高さを設定 */
  font-size: 7px; /* テキストのサイズを変更 */
}

.btn_article_search span {
  display: block;

}

</style>


<script>
jQuery(window).on('load', function() {
  var pos = 0;
  var header = jQuery('.banner');
  var btn_article_search = jQuery('.btn_article_search');
  var search_field = jQuery('.search-field');
  var btn_search = jQuery('.btn_search');
  var btn_hide = jQuery('.btn_hide');

  jQuery(window).on('scroll', function() {
    if (jQuery(this).scrollTop() > pos) {
      // when scroll down
      btn_article_search.show();
      search_field.hide();
      btn_search.hide();
      btn_hide.hide();
    }
    pos = jQuery(this).scrollTop();
  });

  btn_article_search.on('click', function() {
    btn_article_search.hide();
    search_field.show();
    btn_search.show();
    btn_hide.show();
  });

  btn_hide.on('click', function() {
    btn_article_search.show();
    search_field.hide();
    btn_search.hide();
    btn_hide.hide();
  });
});
</script>

—-以前の設定—–

ヘッダーシタウィジェットで設定。

自動で検索窓を隠さないと結構邪魔なので。

テーマ
Twenty Seventeen

検索窓の位置
ヘッダーシタウィジェット

参考
Jqueryの参考

ーーーーーーーーーーーー

<?php
$str = <<<EOS

<div class=”banner”>
<form method=”get” action=”/”>
<input type=”search” style=”background-color: #fffacd;” name=”s” data-swplive=”true” oninput=”this.value=this.value.replace(/　/g, ‘ ‘);” />
<input type=”submit” value=”↑ブログ内検索。文字入力↑” />

</form>
</div>
EOS;
echo $str
?>

<style type=”text/css”>

.banner{
z-index: 1;
width: 100%;
height:100px;
position: fixed;
//left:0;
//top:0;
transition: 1s;
}

.banner.hide {
transform:translateY(-800px);
}

</style>

<script>
jQuery(function(){
var pos = 0;
var header = jQuery(‘.banner’);
// alert(“test”);
jQuery(window).on(‘scroll’, function(){
if(jQuery(this).scrollTop() < pos ){
//上にスクロールしたとき
header.removeClass(‘hide’);
}else{
//下にスクロールしたとき
header.addClass(‘hide’);
}
pos = jQuery(this).scrollTop();
});
});

</script>

ーーーーーーーーーーーー

2022-04-18 追記。動作がうざったいので変更。

ボタンを押して検索フォームが出るように変更しました。

とりあえず今の設定。

<?php
$str = <<<EOS

<span class=”banner”>
<form method=”get” action=”/”>
<input type=”search” style=”background-color: #fffacd;” name=”s” data-swplive=”true” oninput=”this.value=this.value.replace(/　/g, ‘ ‘);” />
</form>
</span>
<input class=”btn_search” type=”button” value=”検索” />

EOS;
echo $str
?>

<style type=”text/css”>

.banner{
z-index: 1;
width: 100%;
height:100px;
// position: fixed;
//left:0;
//top:0;
// transition: 1s;
}

.banner.hide {
display:none;
}
</style>

<script>
jQuery(function(){
var pos = 0;
var header = jQuery(‘.banner’);
jQuery(window).on(‘scroll’, function(){
if(jQuery(this).scrollTop() < pos ){
//上にスクロールしたとき
header.addClass(‘hide’);
}else{
//下にスクロールしたとき
header.addClass(‘hide’);
}
});

var btn_search = jQuery(‘.btn_search’);
btn_search.on(‘click’, function() {
header.removeClass(‘hide’);
});
});

</script>

スマホでの動作がうまく行かないので追記

<?php
$str = <<<EOS

<span class=”banner”>
<form method=”get” action=”/”>
<input type=”search” style=”background-color: #fffacd;” name=”s” data-swplive=”true” oninput=”this.value=this.value.replace(/　/g, ‘ ‘);” />
</form>
</span>
<input class=”btn_search” type=”button” value=”検索” />

EOS;
echo $str
?>

<style type=”text/css”>

.banner{
z-index: 1;
width: 100%;
height:100px;
// position: fixed;
//left:0;
//top:0;
// transition: 1s;
}

.banner.hide {
display:none;
}
</style>

<script>
jQuery(function(){
var pos = 0;
var header = jQuery(‘.banner’);
jQuery(window).on(‘scroll’, function(){
if(jQuery(this).scrollTop() < pos ){
//上にスクロールしたとき
// header.removeClass(‘hide’);
// header.addClass(‘hide’);
}else{
//下にスクロールしたとき
header.addClass(‘hide’);
}
pos = jQuery(this).scrollTop();
});

var btn_search = jQuery(‘.btn_search’);
btn_search.on(‘click’, function() {
header.removeClass(‘hide’);
});
});

</script>